Question

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

我有这个代码打印出一个基于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>";
}

Answer 1

使用title="TOOLTIP TITLE"。

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

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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: