在下拉選擇器中的懸停選項上顯示工具提示
[英]Show tooltip on hover over option in dropdown selector
問題描述
當用戶將鼠標懸停在下拉菜單中的特定選項上時，如何顯示工具提示？
我有這段代碼，它基於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>";
}
2 個解決方案
解決方案1
1 2016-12-29 11:06:04
使用title="TOOLTIP TITLE" 。
例如： <option title="tooltip">test</option>
<select id=""> <option title="test">test</option> <option title="test 123">test123</option> </select>
解決方案2
0 2016-12-29 11:34:18
.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>
下拉菜單顯示懸停選項
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.