CODEWITHSUNDEEP
jqueryhtmltooltip
Ankur Verma
Ankur Verma

Reputation: 5933

Showing the image in tooltip

i am using tipsy plugin

enter image description here

I want to show an image of a User if someone hover's his link.Now the link have an id by which an image is stored in server. so for example if id is 4 then image would be 4.jpg so I used this code to show the tool tip as this :

$('.tipsy').tipsy({
        html: true,
        gravity : 'e',
        title: function() {
            var i=0;
            alert(++i + "   first");
            var imgPath='<img height="50" width="50" src="dp/' + $(this).attr('id') + '.jpg" />';
            try{
                imgPath=$(imgPath).error(function() {
                    alert(++i + "  middle");
                    //imgPath='<img height="50" width="50" src="dp/no-image.jpg" />';
                });
            }catch(err){
                alert('inside catch');
            }
            alert(++i + "   last");
            return imgPath; 
        }
    });

But imgPath never comes <img height="50" width="50" src="dp/no-image.jpg" /> But technically speaking it would take the value of noimage.jpg if error is there but every time it shows me the img with src as <id>.jpg

Also one more thing I noticed this .....the sequence when no error is there is :

  1. alert(++i + " first");

  2. alert(++i + " last");

    and the sequence when error is there is :

    1. alert(++i + " first");
    2. alert(++i + " last");
    3. alert(++i + " middle");

which is wrong because middle alert come in between first and last

Upvotes: 1

Views: 712

Answers (2)

Kshitij
Kshitij

Reputation: 8614

Your error function seems to be called asynchronously for some reason. I am not sure why this is happening, probably it might be in jquery docs, but what you can do is force synchronous check by using ajax() function

alert("first");
var imgPath; //not setting imgPath here
        try{ 
            //using ajax() instead of earlier code
            $.ajax({
                url: 'dp/' + $(this).attr('id') + '.jpg', //might need to give absolute path instead of relative one
                type: 'get',
                async:false, //making sync call to ensure this code is executed
                error: function(XMLHttpRequest, textStatus, errorThrown){
                    imgPath='no-image.jpg'; //if image doesnt exists then set no-image
                    alert("middle-error");
                },
                success: function(data){
                    imgPath='dp/' + $(this).attr('id') + '.jpg'; //succes -set required                    
                    alert("middle-success");
                }
            });
        }catch(err){ 
            alert('inside catch'); 
        } 
alert(" last");

What we are doing here is checking if the image e.g. dp/4.jpg exists on server. we are also forcing sync call this time by setting async:false

Upvotes: 0

iamcrypticcoder
iamcrypticcoder

Reputation: 2879

I really don't no why exception is not being caught. But for any dynamic content on tooltip you can try these plugins :

http://craigsworks.com/projects/simpletip/

http://jquery.bassistance.de/tooltip/demo/

Hopes it helps.

Upvotes: 1

Related Questions