Question

我正在使用Jquery工具提示如何显示鼠标悬停的文本框上的工具提示。 css用什么来显示第二个文本框中心（第二个文本框）的工具提示箭头向下移动。

HTML

<br/><br/>
<input id="ag22" title="We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes." />

<br/><br/>
<input id="ag22" title="We ask for your age only for statistical purposes." />

的jQuery

$(document).tooltip({
    position: {
        my: "left center",
        at: "right center",
        using: function (position, feedback) {
            $(this).css(position);
            $("<div>")
                .addClass("arrow")
                .addClass(feedback.vertical)
                .addClass(feedback.horizontal)
                .appendTo(this);
        }
    }
});

这是我尝试过的链接： http://fiddle.jshell.net/b7SCN/

Answer 1

您可以添加trigger来模拟鼠标悬停，当您点击此jsFiddle

时

http://jsfiddle.net/AK7pv/

在您无法使用相同的ID添加两个元素后，请使用CLASS来生成多个元素

检查此主题：jQueryUI tooltip Widget to show tooltip on Click

Answer 2

不要对mouseover执行任何操作，请在初始化工具提示之前添加此内容。您可能还必须禁用focusin

$('input').on('mouseover',function(e) {
    e.preventdefault();
});

点击

打开触发工具提示

$('input').on('click',function(e) {
    $(this).tooltip('open');
});

修改：将$(document).tooltip更改为$('input').tooltip

显示文本框的Jquery工具提示，而不是鼠标悬停

2 个答案: