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ウェイ

、あなたは、コード例以下のようにこれを行うが、あなたはCSSで制御できるようにしてくださいHTMLのように構造化されていることを確認することができます

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>