ウィンドウの外側に大きなツールチップがあります

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/