如何在HTML CSS標籤上添加工具提示

Question

我有下面的代碼，如何在沒有使用javascript的情況下添加工具提示？

<input id="albtable1" type="radio" name="albtables" checked=""> 
<label for="albtable1" class="colorswatch darkgrey"></label> 

Answer 1

使用「標題」

<input id="albtable1" type="radio" name="albtables" title="Tooltip usando title" checked=""> 

Answer 2

吉爾伯託的回答可能是更好的，但是如果你想使用CSS，你可以使用一個僞選擇。

#albtable1 { 
    position: relative; 
} 

label[for="albtable1"]:hover:not(:focus)::after { 
    content: "Tooltip Message"; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 1px solid; 
    background: white; 
} 

Answer 3

HTML方式

贊（@Gilberto B.特拉小）的回答，您可以使用title attribute，它會顯示工具提示的一種方式。

CSS方式

使用CSS，你可以做到這一點像下面的代碼示例，但要確保HTML的結構是這樣一種方式，讓您可以在CSS控制，

label{ 
 
    cursor: pointer; 
 
} 
 
.tooltip{ 
 
    display:none; 
 
    border: 1px solid red; 
 
} 
 
label:hover .tooltip{ 
 
    display:inline-block; 
 
}

<input id="albtable1" type="radio" name="albtables" checked=""> 
 
<label for="albtable1" class="colorswatch darkgrey">Checkbox (hover here for tooltip)<span class="tooltip">I'm a tooltip</span></label>

Answer 4

這是我找到的解決方案。

<style type="text/css"> 
 
.colorswatch { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
} 
 

 
.colorswatch .tooltiptext { 
 
    font-size:9px; 
 
    display:table; 
 
    position:absolute; 
 
    top: -40px; 
 
    left: -52px; 
 
    min-width:70px; 
 
    max-width:140px; 
 
    width:120px; 
 
    border:5px solid #afadad; 
 
    background-color:#f3f3f3; 
 
    color:#000; 
 
    text-align:center; 
 
    height: 30px; 
 
    padding:2px 
 
z-index:99999999999999999; 
 
} 
 
.colorswatch .tooltiptext:after { 
 
content:''; 
 
position:absolute; 
 
bottom:-9px; 
 
width:10px; 
 
height:10px; 
 
border-bottom:5px solid #afadad; 
 
border-right:5px solid #afadad; 
 
background:#f3f3f3; 
 
left:50%; 
 
margin-left:-5px; 
 
-moz-transform:rotate(45deg); 
 
-webkit-transform:rotate(45deg); 
 
transform:rotate(45deg); 
 
z-index:101 
 
} 
 

 
.colorswatch:hover .tooltiptext { 
 
    visibility: visible; 
 
} 
 
</style>

<input id="albtable1" type="radio" name="albtables" checked=""> 
 
<label for="albtable1" class="colorswatch darkgrey"><span class="tooltiptext">Tooltip text</span></label>