Question

我有一个问题，我正在尝试向一些已经渲染的元素添加工具提示。我有的代码使工具提示出现在第二个悬停之后，这是正常的，因为第一个尚未设置，你知道我可以做什么让它从第一个悬停显示？

提前致谢！

我有以下代码：

$(".checkWidth").live("mouseenter",function() {
  var size = measureText($(this).text(), 12, 'Tahoma')
  var limit = $('#my_container').width() - 67;

  if( size.width > limit){

    $(this).attr('title', $(this).text());

    $('#tiptip_content').css('font-size', '13px');

    $(this).tipTip({
      maxWidth: "auto",
      defaultPosition: "right",
      fadeIn: 100,
      fadeIn: 100,
      attribute: "title"
    });
 }

}）;

Answer 1

这取决于您的代码结构。但我会尝试以下方法：

尝试将.live（）更改为.on（）
我会尝试将功能更改为.on（'hover'，function）
我也会尝试使用mousenter和mouseleave

Answer 2

调用$(this).tipTip({...}); 设置工具提示，但不会显示。因此，在鼠标悬停元素之前，您实际上并未设置工具提示，并且下次鼠标悬停时会显示工具提示（由插件处理）。

你需要在DOM上调用它。我想你可能需要这样的东西：

$(document).ready(function () {

    $('#tiptip_content').css('font-size', '13px');
    var limit = $('#my_container').width() - 67;

    $('.checkWidth').each(function () {
        var size = measureText($(this).text(), 12, 'Tahoma');

        if (size.width > limit) {

            $(this).attr('title', $(this).text());

            $(this).tipTip({
                maxWidth: "auto",
                defaultPosition: "right",
                fadeIn: 100,
                fadeIn: 100,
                attribute: "title"
            });
        }
    });
});

编辑另一种可能性：

$('#tiptip_content').css('font-size', '13px'); //this should be able to be done elsewhere...

$("document").on("mouseenter", '.checkWidth', function () {
    var $this = $(this);

    if ($this.data('tipInit') === true) { return; }
    $this.data('tipInit', true);

    var size = measureText($(this).text(), 12, 'Tahoma')
    var limit = $('#my_container').width() - 67;

    if (size.width > limit) {

        $this.attr('title', $this.text());

        $this.tipTip({
            maxWidth: "auto",
            defaultPosition: "right",
            fadeIn: 100,
            fadeIn: 100,
            attribute: "title"
        });

        $this.trigger('mouseenter');        
    }    

});

第二个悬停后显示工具提示

2 个答案: