CSS工具提示箭头不工作

-1

我一直在试图提出一个工具提示。类似，当我悬停在图像出现的下面的图像中：CSS工具提示箭头不工作

问题是低于三角箭头不来在所有。我GOOGLE了很多，并通过以前问的问题stackoverflow的问题。但没有运气。我要在下面放码，你可以请让我知道我错了：

HTML代码：

<span class="help-tooltip" tooltip-text="Lorem ipsum dolor sit amet, consectetur 
      adipiscing elit. Donec non diam enim. Quisque leo erat, vulputate id mi et, pharetra vulputate sapien."> 

      <img src="/static/img/help.png"> 
</span>

下面是我的CSS代码：

span[tooltip-text]:hover:after { 
    content: attr(tooltip-text); 
    padding: 8px 8px; 
    color: white; 
    position: absolute; 
    left: -60px; 
    bottom: 120%; 
    width: 275px; 
    height: auto; 
    background: #0679ca; 
    border-radius: 10px; 
} 

.help-tooltip:hover { 
    position: relative; 
}

来源

2017-05-22 Shubhangi Garg

请试试这个实现你的目标，

.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
    margin: 50px; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 150%; 
 
    left: 50%; 
 
    margin-left: -60px; 
 
} 
 

 
.tooltip .tooltiptext::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: black transparent transparent transparent; 
 
} 
 

 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
}

<body style="text-align:center;"> 
 

 
<div class="tooltip">Hover me 
 
<span class="tooltiptext">Tooltip text</span> 
 
</div>

来源

2017-05-22 13:11:40 codesayan

CSS工具提示箭头不工作

回答

相关问题