ドロップダウンセレクタでツールチップをホバーオーバーオプションに表示

ユーザーがドロップダウンの特定のオプションの上にマウスを移動しているときに、ツールチップを表示するにはどうすればよいですか？ドロップダウンセレクタでツールチップをホバーオーバーオプションに表示

function createDropdownQuestion($node, $name) 
{ 
    print "<select class='form-control'name=\"$name\" id=\"$name\>"; 
    $i = 0; 
    foreach($node->childNodes as $option) 
    { 
     if(nodeIsValidOption($option)) 
     { 
      if ($option->hasAttribute("tooltip")) 
      { 
       print "<option title='Show this tooltip' value=\"$i\">$option->nodeValue</option>"; 
      } 
      else 
      { 
       print "<option value=\"$i\">$option->nodeValue</option>"; 
      } 
      $i++; 
     } 
    } 
    print "</select>"; 
}

出典

2016-12-29 Andegosu

、[あなたがこれを読んだことがある]（http://stackoverflow.com/questions/3249591/ how-can-i-display-a-tooltip-on-an-html-option-tag） - whoops！あなたはツールヒントの部分で間違ったことをしないで、 ' "？>' ... –

この既存の[質問]（http://stackoverflow.com/questions/3249591/how-can-i-display-a-tooltip-on-an-html-option-tag）をご覧ください。 –

明らかに私の初期のコードで動作していましたが、私は気づいていない約2秒の遅れです。私が解決するもう一つの問題であるサーバー上のほとんどのアクションが遅れているようです。あなたの答えをありがとう。 – Andegosu

使用title="TOOLTIP TITLE"：

私は、ドロップダウンセレクタのオプションのいくつかのツールチップを表示するようになっているXMLコードに基づいて、ドロップダウン質問をプリントアウトし、このコードを持っています。例えばのために

：うまく<option title="tooltip">test</option>

<select id=""> 
 
    <option title="test">test</option> 
 
    <option title="test 123">test123</option> 
 
</select>

出典

2016-12-29 11:06:04 RJParikh

はい、自分のコードにtitle属性が含まれていました。最初はサーバー上の遅延のためにツールチップに気付かなかったので、うまくいかないと思った。なぜそんなに大きな遅れがあるのかわからない。 – Andegosu

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

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

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

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

<!DOCTYPE html> 
 
<html> 
 

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

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

 
</body> 
 
</html>

出典

2016-12-29 11:34:18

私はそれを以前に試みましたが、オプションのドロップダウンメニューでは機能しません。 – Andegosu

ドロップダウンセレクタでツールチップをホバーオーバーオプションに表示

答えて

関連する問題