窗口外的大工具提示

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/