Question

我的页面左侧有一个列表，其中包含每个元素的工具提示（悬停）。我在每个元素的右侧显示工具提示，但工具提示内容有时很大（10-30个lignes）。当我显示列表中最后一项的工具提示时，其底部位于浏览器之外。

是否可以始终在窗口中获取工具提示。例如，当鼠标放在列表的第一个元素上时，我应该在鼠标右侧的工具提示的顶部，当我将鼠标悬停在最后一个元素上时，我应该在鼠标右侧的工具提示的底部。

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

这是一种廉价的解决方法，但是当您为列表项的上半部分放置工具提示时，请将引用点设置为顶部（import java.util.Set; import java.util.TreeSet; public class Testing { public static void main(String args[]) { Set<String> set1 = new TreeSet<String>() ; set1.add("A") ; set1.add("B") ; set1.add("C") ; set1.add("D") ; set1.add("F") ; set1.add("G") ; System.out.println("set1, the tree set: " + set1) ; Set<String> set2 = new TreeSet<String>() ; set2.add("B") ; set2.add("D") ; set2.add("E") ; set2.add("F") ; set2.add("G") ; System.out.println("set2, the tree set: " + set2) ; Set set3 = difference(set1, set2); System.out.println("Difference: " + set1 + " - " + set2 + " = " + set3) ; } public static Set<String> difference(Set<String> x, Set<String> y) { x.removeAll(y); return x; }}）和列表项的下半部分，使用底部作为参考点（top: 0px）;

<强> CSS

bottom: 0px

<强> HTML

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%;
}

链接：https://jsfiddle.net/3h1z1gnn/

窗口外的大工具提示

1 个答案: