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工具提示箭頭不工作

回答

相關問題