如何让jQuery tooltip在hover或点击时立即显示？

问题分析 #

浏览器自带的title属性提示框有固定延迟，这是浏览器内置行为无法通过修改title消除；而你写的点击代码无效，是因为click()方法仅支持一个回调函数，第二个函数不会执行，且点击操作也不会触发浏览器默认的title提示框显示。下面给出两种对应需求的解决方案：

方案1：Hover时立即显示自定义提示框 #

通过自定义提示框元素，完全替代浏览器默认的title提示，实现无延迟显示：

1. 添加提示框DOM元素

<div class="custom-tooltip">Requires a King.</div>

2. 设置提示框样式

.custom-tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    display: none;
    z-index: 1000;
    /* 可根据需求调整样式 */
}

3. 编写jQuery逻辑

$(".tool-tip-k").hover(function() {
    $(this).css('cursor','pointer');
    // 计算并设置提示框位置
    const elemOffset = $(this).offset();
    const tooltip = $('.custom-tooltip');
    tooltip.css({
        top: `${elemOffset.top + $(this).outerHeight() + 5}px`,
        left: `${elemOffset.left}px`
    }).show();
}, function() {
    $(this).css('cursor','auto');
    $('.custom-tooltip').hide();
});

方案2：点击显示/隐藏提示框 #

同样使用自定义提示框，通过点击事件切换提示框的显示状态：

（复用方案1的DOM和CSS代码，仅修改jQuery逻辑）

$(".tool-tip-k").click(function() {
    const tooltip = $('.custom-tooltip');
    if (tooltip.is(':visible')) {
        tooltip.hide();
        $(this).css('cursor','auto');
    } else {
        $(this).css('cursor','pointer');
        const elemOffset = $(this).offset();
        tooltip.css({
            top: `${elemOffset.top + $(this).outerHeight() + 5}px`,
            left: `${elemOffset.left}px`
        }).show();
    }
});

可选优化：动态读取提示内容 #

如果需要给不同元素设置不同提示内容，可以给目标元素添加data-tooltip属性：

<span class="tool-tip-k" data-tooltip="Requires a King.">目标元素1</span>
<span class="tool-tip-k" data-tooltip="Other tips.">目标元素2</span>

然后在JS中修改提示框文本：

// 在hover或click的显示逻辑中添加
tooltip.text($(this).data('tooltip'));

内容的提问来源于stack exchange，提问作者Johnny John Boy