큰 툴팁 윈도우 외부

Question

각 요소의 툴팁 (마우스 오버시)과 함께 내 페이지의 왼쪽에 목록이 있습니다. 각 요소 오른쪽에 툴팁이 표시되지만 툴팁 내용이 큰 경우가 있습니다 (10-30 줄). 내 목록의 마지막 항목에 대한 툴팁을 표시 할 때 하단 부분이 브라우저 바깥에 있습니다.

툴팁을 항상 창에서 가져올 수 있습니까? 예를 들어, 목록의 첫 번째 요소에 마우스를 가져 가면 마우스 오른쪽의 툴팁 상단을 가져와야하며 마지막 요소를 가져 가면 마우스 오른쪽의 툴팁 하단을 가져와야합니다.

CSS의 솔루션은 완벽하지만 JavaScript가 가능합니다.

감사

실제 CSS :

.menu-item .tooltiptext { 
    visibility: hidden; 
    width: 360px; 
    background-color: #e5e5e5; 
    color: black; 
    border-radius: 6px; 
    padding: 15px; 
    position: absolute; 
    z-index: 100; 
    top: -50%; 
    left: 110%; 
    border: solid 1px #333; 
} 

.menu-item:hover .tooltiptext { 
    visibility: visible; 
    opacity: 1; 
} 

Answer 1

그것은 싼 해결 방법입니다,하지만 당신은 목록 항목의 상단 절반 툴팁을 배치 할 때, 참조의 점을 상단 (top: 0px를)하고 목록 항목의 아래쪽 절반은 바닥을 참조 점 (bottom: 0px)으로 사용하십시오.

CSS

li[data-title]:after { 
    content: attr(data-title); 
    display: block; 
    position: absolute; 
    opacity: 0; 
    width: 100px; 
    left: 100%; 
    margin-left: 10px; 
    padding: 5px; 
    background-color: lightgreen; 
    transition: 0.5s ease-in-out; 
} 

li[data-title]:nth-child(1):after, 
li[data-title]:nth-child(2):after, 
li[data-title]:nth-child(3):after, 
li[data-title]:nth-child(4):after, 
li[data-title]:nth-child(5):after { 
    top: 0px; 
} 

li[data-title]:nth-child(6):after, 
li[data-title]:nth-child(7):after, 
li[data-title]:nth-child(8):after, 
li[data-title]:nth-child(9):after, 
li[data-title]:nth-child(10):after { 
    bottom: 0px; 
} 

li[data-title]:hover:after { 
    opacity: 1; 
} 

li[data-title]:before { 
    content: ' '; 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right:10px solid lightgreen; 
    position: absolute; 
    top: 50%; 
    margin-top: -5px; 
    left: 100%; 
    opacity: 0; 
    transition: 0.5s ease-in-out; 
} 

li[data-title]:hover:before { 
    opacity: 1; 
} 

/* This is to get a long list of stuff */ 

li { 
    position:absolute; 
    height: 10%; 
    left: 0px; 
    width: 100px; 
    box-sizing: border-box; 
    border-right: 1px solid gray; 
    border-bottom: 1px solid gray; 
    background-color: lightblue; 
    text-aling: center; 
} 

li:nth-child(1) { 
    top:0%; 
} 

li:nth-child(2) { 
    top:10%; 
} 

li:nth-child(3) { 
    top:20%; 
} 

li:nth-child(4) { 
    top:30%; 
} 

li:nth-child(5) { 
    top:40%; 
} 

li:nth-child(6) { 
    top:50%; 
} 

li:nth-child(7) { 
    top:60%; 
} 

li:nth-child(8) { 
    top:70%; 
} 

li:nth-child(9) { 
    top:80%; 
} 

li:nth-child(10) { 
    top:90%; 
} 

HTML

<ul> 
    <li data-title="This is a tooltip text that will hopefully be long enough!">One</li> 
    <li data-title="This is a tooltip text that will hopefully be long enough!">Two</li> 
    <li data-title="This is a tooltip text that will hopefully be long enough!">Three</li> 
    <li data-title="This is a tooltip text that will hopefully be long enough!">Four</li> 
    <li data-title="This is a tooltip text that will hopefully be long enough!">Five</li> 
    <li data-title="This is a tooltip text that will hopefully be long enough!">Six</li> 
    <li data-title="This is a tooltip text that will hopefully be long enough!">Seven</li> 
    <li data-title="This is a tooltip text that will hopefully be long enough!">Eight</li> 
    <li data-title="This is a tooltip text that will hopefully be long enough!">Nine</li> 
    <li data-title="This is a tooltip text that will hopefully be long enough!">Ten</li> 
</ul> 

링크 : 코드가 https://jsfiddle.net/3h1z1gnn/