jQuery UI工具提示在dash图标上的位置

Question

我正在使用构建在WordPress中的jQuery UI工具提示(jquery工具提示)。我的问题是控制工具提示在屏幕上的位置，目前它弹出的帮助仪表符之上，但它也似乎大约100 My以上的图标。图标本身位于动态对齐中心的div中。它需要固定在图标上方的位置，而不是跳上页面。

所需的脚本和样式随下列内容添加。

wp_enqueue_script('wpb-tooltip-jquery', plugins_url('/js/um-tooltip.js', __FILE__ ), array('jquery-ui-tooltip'), '', true);
wp_enqueue_style('wpb-tooltip-css', plugins_url('/css/um-tooltip.css', __FILE__), false, null);
wp_enqueue_style( 'dashicons' );

um-tooltip.css

.ui-tooltip {
    background: #356aa0;
    border: 1px solid white;
    position: relative;
    padding: 10px 20px;
    color: white;
    border-radius: 3px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    box-shadow: 0 0 7px #356aa0;
    max-width:350px;
}

um-tooltip.js

jQuery( document ).ready(function($) {
    jQuery('#kaini_pass_info').tooltip({
        content: "'Good' or better on strength meter.<br />" +
            "Password must not be a dictionary word,<br />" +
            "name or keyboard pattern.<br />" +
            "Tips for better passwords :<br />" +
            "Be lengthy (8 or more characters),<br />" +
            "contain uppercase letters (A-Z),<br />" +
            "lowercase letters (a-z), digits (0-9),<br />" +
            "and special characters (&,'^!.\"*[]+- etc)"
    });
});

HTML

<a id="kaini_pass_info" href="#" title=""><span class="dashicons dashicons-editor-help"></span></a>

Answer 1

当鼠标悬停在某些元素上时，让提示跟随鼠标的简单解决方案如下：

    $(".selector").tooltip({
        track: true,//make tip follow mouse when hover over all element with class "selector"
        content: "Tooltip content here",

    });