javascript - 在内容为 It's value 的选定元素上显示提示

Question

我想创建一个 select 控件，它将显示法规编号。

但是对于标准用户而言，只有数字并不意味着任何东西(另一方面，如果我创建包含这些雕像文本的 select 控件，它将完全不可读)。

我想用提示显示 div，当 鼠标悬停在 所选元素上时提示会出现。但老实说，我对此有一些问题。

这是我的选择控件:

<select name="dropdn" class="mydpdn">
    <option title='Some description for the ASX-1/1'>ASX-1/1</option>
    <option title='Some description for the ASX-1/2'>ASX-1/2</option>
    <option title='Some description for the ASX-1/3'>ASX-1/3</option>
    <option title='Some description for the ASX-1/4'>ASX-1/4</option>
    <option title='Some description for the ASX-1/5'>ASX-1/5</option>
    <option title='Some description for the AED-1/1'>AED-1/1</option>
    <option title='Some description for the AED-1/2'>AED-1/2</option>
    <option title='Some description for the AED-1/3'>AED-1/3</option>
</select>

Title 标签是我能想到的唯一方法。但是这个解决方案使 hint 出现了一些延迟，此外我不能(或不知道如何)为这个提示创建 CSS 看起来更用户友好。

任何人都可以提示我如何改进这段代码吗？

Answer 1

您不能更改标题属性功能，因为它是浏览器的实现。您需要为您的问题使用第三方工具提示之类的东西。一个这样的插件是 JQuery tooltip .