CODEWITHSUNDEEP
javascriptjquerytooltip
Alejandra
Alejandra

Reputation: 726

tooltip is shown after the 2nd hover

I have a problem, I'm trying to add a tooltip to some already rendered elements. The code that I have makes the tooltip appear after the 2nd hover which is kind of normal because on the first one is not set yet, do you know what can I do to have it displayed from the first hover?

Thanks in advance!

I have the following code: 

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

});

Upvotes: 0

Views: 259

Answers (2)

CodeGodie
CodeGodie

Reputation: 12132

it depends on your code structure. But I will try the following:

  • Try changing the .live() to .on()
  • I would try to change the function to .on('hover', function)
  • I would also try to use mousenter and mouseleave

Upvotes: 1

Jason P
Jason P

Reputation: 27012

Calling $(this).tipTip({...}); sets up the tooltip, it doesn't show it. So you don't actually set up the tooltip until you mouseover the element, and the tooltip is shown the next time you mouse over (handled by the plugin).

You'll need to call that on DOM ready. I think you may need something like this:

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

Edit another possibility:

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

});

Upvotes: 1

Related Questions