如何在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

Gilberto的答案可能更好，但是如果你想使用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. Terra Jr.）的回答，一種使用title屬性的方法 ，它會顯示工具提示。

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>