Tooltip not shown properly the first time

[rampatra]

I have used tooltipster jquery plugin to create another jquery plugin called "ContentShare" but I am stuck with an issue.

Tooltipster fails to show the content properly for the first time when i call $(element).tooltipster('show') but from the second time onwards it works as it should.

Go through this link for more understanding. Any help would be appreciated.

[louisameline]

Hello,

that's because your images are not loaded when the tooltip opens the first time, so they have no size at that time (because you have not specified one in CSS). As a consequence, the tooltip adopts a size which is too small to contain the images when they have finished loading. On the other hand, when the tooltip opens for the second time, the images are already loaded and the tooltip adopts the right size.

How to solve it :

• give a size to your images in CSS
• or provide the content in the form of a jQuery object as shown in the 4th section of the documentation: "Taking it a step further" (the images will then be loaded at initialization)
• or bind on the image to reposition the tooltip when it has finished loading : $(img).load(function(){ $element.tooltipster('reposition') })
• or use the trackTooltip option (Tooltipster v4 only), although it can have an impact on the performance of the application.

[rampatra]

Okay will try with the other options and update you, thanks for your time and effort :)

[ludoo0d0a]

Same trouble and solution#2 (replace contentHTML:true with $(html)) solve it, cool !

[rampatra]

Hey @ludoo0d0a , can you please elaborate on your solution

[louisameline]

@ramswaroop read the 4th section of the documentation : Taking it a step further

[ludoo0d0a]

@ramswaroop
do not use

$('#myid').tooltipster({contentAsHTML:true}) 
'and then on update
$('#myid').tooltipster('content', '<div class="any-size"><img src="my-image"></div>')

but

$('#myid').tooltipster()
'and then on update
$('#myid').tooltipster('content', $('<div class="any-size"><img src="my-image"></div>'))

[davidfwall]

@ramswaroop A quick and easy (and nasty) fix is to load the images in a hidden div at the top of the page.

[mothermary]

Here is what worked for me:

$('#ID').tooltipster({
    contentAsHTML: true,
    functionReady: function(origin) {
        $('img').load(function(){ 
            origin.tooltipster('reposition');
        });
    }
});

[kevinhamil]

I'm a bit lost on this and can't seem to figure it out... I'm experiencing the tooltip not showing the first time, but after the second time hovering it works fine. I've tried several of the solutions presented here, but to no avail.

I have multiple thumbnails on my page and each is named chronologically (thumbnail1.jpg, thumbnail2.jpg, etc.). When a thumbnail is hovered over it should show a preview image unique to that thumbnail. Below is my code.

$('.item-thumb img').mouseover(function() {
    // get the path of the thumbnail image
    var thumbnailPath = $(this).attr('src');
    // extract the thumbnail filename from the full path
    var thumbnailFilename = thumbnailPath.split("/")[thumbnailPath.split("/").length-1];
    // create the preview image filename by replacing 'Thumb' with 'Preview'
    var previewFilename = filename.replace("Thumb","Preview");

    $(this).tooltipster({
        contentAsHTML: true,
        content: $('<span><img src="path/to/img/' + previewFilename + '" /></span>'),
        theme: 'previewPopup'
    });
});

Note: I do specify an image width and height in my css class.

Thanks for any help.

[louisameline]

Please instantiate Tooltipster at page load, not at mouseover.

[kevinhamil]

Ok, so maybe I'm trying to use Tooltipster in a way it wasn't meant to be used?

I have many thumbnails dynamically loading onto a page. I want to show a larger preview on hover of what each thumbnail represents. But I don't want to manually put each tooltip html content the JS file in the header. That would be too complicated and my content changes each week. I'm automating.

So I want to dynamically give the "content:" a different path to the larger preview image when hovering over each thumbnail. I almost had it working when instantiating on mouseover, but not 100%.

By instantiating at page load I don't see how I can accomplish what I want. Any ideas?

[mothermary]

You are on the right track with your previous post.

When you are hovering over the image for the first time, check out the path of the image in the tool tip. Is it it correct?

Also, you can probably get rid of your span tag around the image in your tool tip as it is not needed.

If none of these things will help, post a link to your page so I can check it out.

[kevinhamil]

@louisameline regarding my previous post, is there a downside to instantiate at mouseover vs page load (for my need)? Does mouseover break Tooltipster's functionality or is there another reason you advise not instantiating on mouseover? Thanks.

[mothermary]

@kevinhamil You should only need to instantiate the plugin once (at page load) - not every time you hover over an image.

[ramchiranjeevi]

@mothermary I also face the same issue what @kevinhamil face.
In my document load I have initialized Tooltipster. The initial elements gets the tool tip correctly, but when there are dynamic elements added on the go, the tool tip is not working for those newly added elements.

Googled and found the initializing Tooltopster on mouseover for the parent div and initializing it again and again. This is not an ideal solution.

Then how can it be applied for future dynamically added elements?

[louisameline]

Actually when you "initialize it again", it's not initialized again. Nothing happens except for a warning in the console.

There is no magic, you have to handle initializing things at the proper time by yourself (if you want to do things in a clean way).

[mothermary]

First initialize the plugin on page load. Then, if you want to change the content dynamically on mouseover, try these API methods:

// return a tooltip's current content (if selector contains multiple origins, only the value of the first will be returned)
$(...).tooltipster('content');

// update tooltip content
$(...).tooltipster('content', myNewContent);

So maybe you would do something like this:

$('.item img').mouseover(function() {
    var source = $(this).attr('src');
    $(this).tooltipster('content', source);
});

[kevinhamil]

Thanks @louisameline
@mothermary I did try the same thing, but it didn't seem to be correctly update to the proper image on the first hover. But maybe I missed something. I'll go back and try it again and double check my work. Thanks.

[amin101]

hi .thanks for great plugin . using load doesnt work for proper repositioning img. i think because load should be used with on but according to jquery doc it is not possible

In all browsers, the load, scroll, and error events (e.g., on an element) do not bubble. In Internet Explorer 8 and lower, the paste and reset events do not bubble. Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element ?generating the event.

as well as assignign width and height is not a good idea. it makes imgs unpleasant due to destroying img scale.

is there another way to reposition img after loading ?

[louisameline]

It does work but the listener must be on an img element.
Yoy should try Tooltipster v4 on the v4 branch and read the bundled FAQ about this issue.

[amin101]

thanks for reply. but no success. i have a photo gallery when user hover over a thumbnail tooltipster shows real size image.

server return this as response :

<img class="json-img" scr="..." />

and tooltipster setting:

 $('.thumbnail').tooltipster({
.
.
.
 success: function (data) {
                            // update our tooltip content with our returned data and cache it
                            origin.tooltipster('content', $( data)).data('ajax', 'cached');
                        }
.
.
.
});

$('.json-img').on('load', function(){
           alert('hello');
           $('.thumbnail').tooltipster('reposition');
       });

every time an image is loaded via ajax no alert/no repositioning would run .so whats wrong with my code?

[louisameline]

Please review this page: http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached thanks

[amin101]

thanks.after three days finally SOLVED
I've tried lots of solutions no one worked except this simple directive:

<img src="/path/to/image.jpg" onload="doStuff(this);" />

but an important note: dont forget to put doStuff() OUT OF $(document).ready function
if put it inside it does'nt work
I think it would be a good idea to add it to docs

[louisameline]

This issue is now explained in the FAQ of the documentation. Thank you.

[magicmb]

Ok, so maybe I'm trying to use Tooltipster in a way it wasn't meant to be used?

I have many thumbnails dynamically loading onto a page. I want to show a larger preview on hover of what each thumbnail represents. But I don't want to manually put each tooltip html content the JS file in the header. That would be too complicated and my content changes each week. I'm automating.

So I want to dynamically give the "content:" a different path to the larger preview image when hovering over each thumbnail. I almost had it working when instantiating on mouseover, but not 100%.

By instantiating at page load I don't see how I can accomplish what I want. Any ideas?

​
I had a similar situation which involved dynamically creating tooltips containing images/content loaded (rendered) dynamically. Then I did some postRender processing for any images which had invalid image links (for whatever reason) e.g.clean up image references and removing associated content as well as 'remove' or 'disable' the now unnecessary tooltip for the elements in question.

Oddly enough I too was initially trying to achieve all this incorrectly during on.hover/mouseenter and figured I only needed to instantiate the Tooltipster once on document.ready, which I kinda got working with a noticeable lag as @kevinhamil reported, but after trying various things mentioned in the Docs relating to HTML inside the Tooltip and 'data-tooltip-content' (which I currently use for direct tooltip storage as opposed to referencing a separate tooltip element) etc as well as reading many comments in particular by @louisameline himself I figure it was best to always follow the good advice given and hence my solution resulted in the following:

​

1. Bind (not sure if this is the right terminology) each tooltip at time of creation i.e. during rendering of my elements

2. Make any subsequent changes necessary during postRender (incidentally in my case this was during fullCalendar: eventAfterAllRender)

3. Only call the on.hover functionality when everything is in place e.g. changes already made to tooltip content (see previous step) - > then upon mouseenter selectively decide which tooltips need their content changed e.g fire a Tooltipster content update: $(this).tooltipster('content', varNewTipContent );

​
IMO anyone struggling with a similar case involving changing tooltips based on dynamically loading content may find these steps useful as part of their own troubleshooting and I dare say you'll probably find your Tooltipster tooltips loading lightning fast just like that 😊