0

問題があります。既にレンダリングされた要素にツールチップを追加しようとしています。私が持っているコードは、最初のホバーがまだ設定されていないため、2 回目のホバー後にツールチップを表示しますが、最初のホバーから表示するにはどうすればよいですか?

前もって感謝します！

次のコードがあります。

$(".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) に変更しようとします
  • 私はmousenterとmouseleaveも使用しようとします
于 2013-08-09T18:08:41.147 に答える
1

呼び出すとツールチップが$(this).tipTip({...}); 設定されますが、表示されません。したがって、要素にマウスオーバーするまでツールチップを実際に設定することはなく、次にマウスオーバーしたときにツールチップが表示されます (プラグインによって処理されます)。

DOM Ready でそれを呼び出す必要があります。次のようなものが必要になる場合があると思います。

$(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 に答える