Question

我希望在悬停时选择选项上有工具提示。我的目标是在选择框宽度减少时为悬停选项提供工具提示

<html>
<head>
<title>Select box</title>
<body>
     <select data-val="true" data-val-number="The field CategoryID must be a number." data-val-required="The CategoryID field is required." id="ddlcat" name="CategoryID">
        <option value="">----Please Select Category----</option>
        <option value="1">Account Opening Email</option>
        <option value="2">Closure Email</option>
        <option value="3">OTP Email</option>
        </select>
</body>
</html>

以上是我的选择框的代码....我尝试给选项的标题但它似乎没有输出 `

Answer 1

我希望这就是你要找的东西。我使用jQuery完成了这个。

＆＃13;

$('select').hover(
  function(){var value=$(this).find('option:selected').text();
$('#select_val').text(value).show();
},function(){
$('#select_val').hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<html>
<head>
<title>Select box</title>
<body>
     <select data-val="true" data-val-number="The field CategoryID must be a number." data-val-required="The CategoryID field is required." id="ddlcat" name="CategoryID">
        <option value="">----Please Select Category----</option>
        <option value="1">Account Opening Email</option>
        <option value="2">Closure Email</option>
        <option value="3">OTP Email</option>
        </select>
  <div id="select_val" style="display:none;width:200px;height:20px;position:absolute;top:15px;left:200px;background:aqua;padding:10px;color:black;font-weight:bold;"></div>
</body>
</html>

＆＃13;

悬停时的工具提示

1 个答案: