0

我有一个问题，我正在尝试向一些已渲染的元素添加工具提示。我的代码使工具提示出现在第二次悬停之后，这很正常，因为第一个悬停还没有设置，你知道我该怎么做才能让它从第一次悬停时显示出来？

提前致谢！

我有以下代码：

$(".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"
    });
 }

});

4

2 回答 2

1

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

  • 尝试将 .live() 更改为 .on()
  • 我会尝试将函数更改为 .on('hover', function)
  • 我也会尝试使用 mouseenter 和 mouseleave
于 2013-08-09T18:08:41.147 回答
1

调用$(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');        
    }    

});
于 2013-08-09T18:09:05.540 回答