Question

So I’m using the jquery plugin fancybox and I got it working but I want know how to tweak it a little bit. So here’s my html:

<a id="pics" title="This is some text that displays" href="Images/test.jpg">
<img alt="pics" src="Images/test.jpg"/></a>

And here’s my jquery:

$("a#pics").fancybox({
    openEffect : 'elastic',
    openSpeed  : 150,
    closeEffect : 'elastic',
    closeSpeed  : 150,
    closeClick : true,
    helpers : {
        title : {
            type : 'over'
        }
    }
});

So when I click the picture it shows up with the text over the picture, which is great. What’s not great is that when you hover over the picture all the title text appears beside the cursor (i know that’s what the title attribute does). But is there anyway to modify the above html/jquery code to display all the same thing but just not have that tooltip show up on hover?

Answer 1

Showing a little tooltip with the content of title attribute of an anchor is browser behavior.
You can user another attribute so the tooltip is not shown by the browser, try this:

<a id="pics" caption="This is some text that displays" href="Images/test.jpg">
<img alt="pics" src="Images/test.jpg"/></a>

And the fancybox options:

$("a#pics").fancybox({
    openEffect : 'elastic',
    openSpeed  : 150,
    closeEffect : 'elastic',
    closeSpeed  : 150,
    closeClick : true,
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
    }
    helpers : {
        title : {
            type : 'over'
        }
    }
});

You can see a working example by fancybox.