如何使用键盘代替鼠标显示html选择列表的工具提示

How to show tooltips for a html select list by using keyboard instead of mouse?

本文关键字:选择 html 列表 工具提示 显示 鼠标 何使用 键盘      更新时间:2023-09-26

我已经创建了以下html代码和JQuery脚本

<select id="myId" name="myName" onmouseover="createToolTip('myName')">
    <option value="value_1" title="My first tooltip">option to select 1</option>
    <option value="value_2" title="My second tooltip">option to select 2</option>
    <option value="value_3" title="My third tooltip">option to select 3</option>
    <option value="value_4" title="My fourth tooltip">option to select 4</option>
</select>
function createToolTip(name){   
    var tooltips = {
        'value_1': 'option to select 1',
        'value_2': 'option to select 2',
        'value_3': 'option to select 3',
        'value_4': 'option to select 4'
    };
    var selector = "[name=" + name + "] option";                    
    jQuery(selector).each(function() {
        $(this).attr('title', tooltips[$(this).val()]);
    });         
};

如果我用鼠标滚动到option字段上,将会显示该option元素的特定工具提示。

但是,如果我只使用键盘(箭头光标)在选项列表上导航,是否有可能显示工具提示?或者工具提示只在使用鼠标时可见?哪个事件必须用于此(例如,onfocus不起作用)

谢谢!

onfocus事件呢?你试过吗?我相信onfocus在鼠标和键盘上都能工作。