在下拉选择器中的悬停选项上显示工具提示答案

【问题标题】：Show tooltip on hover over option in dropdown selector在下拉选择器中的悬停选项上显示工具提示
【发布时间】：2016-12-29 10:57:49
【问题描述】：

当用户将鼠标悬停在下拉列表中的特定选项上时，如何显示工具提示？

我有这段代码，它根据 XML 代码打印出一个下拉问题，该代码应该在下拉选择器中的某些选项上显示工具提示：

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>";
}

【问题讨论】：

好吧，have your read this -- 哎呀！看起来，你没有在工具提示部分做错什么，只要确保它输出<option title="Show this tooltip"...。所以..我问这个问题..怎么了..？因为我尝试在phpfiddle 中使用<select><?php print "<option title='tooltip' value=\"yep\">nein</option>" ?></select>，它确实有效...
查看这个现有的question。
显然它正在使用我的初始代码，但我没有注意到大约 2 秒的延迟。似乎是服务器上大多数操作的延迟，这是我要解决的另一个问题。谢谢你的回答。
为了避免陷入困境，工具提示延迟不是服务器问题。基于标题的工具提示出现的延迟取决于您使用的浏览器。让它更快出现的唯一方法是使用 onmouseover 事件在 javascript 中实现一些东西。
好的，感谢您的提醒。虽然我在单击单选按钮时也有一些延迟。

标签： php jquery html dropdown

【解决方案1】：

使用title="TOOLTIP TITLE"。

例如：<option title="tooltip">test</option>

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

【讨论】：

是的，我的代码中包含了 title 属性。由于服务器延迟，我一开始没有注意到工具提示，所以我认为它不起作用。不知道为什么会有这么大的延迟。

【解决方案2】：

.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>

【讨论】：

我之前尝试过，但它在选项下拉菜单中不起作用。