Querying trigger object variables for JQueryTools tooltip

Question

What I've done is created a basic JQueryTools tooltip that triggers on any element with a title tag. Simple. Within the triggering element's title tag, I've placed the name of an image file. Code below:

$(function() {
  $("[title]").tooltip({
    tipClass: "tooltip",
    layout: '<img src="img/' + this.title + '" height="60" border="0" />'
  });
});

What happens is that I get the title for the web page instead of the text from the title attribute that's being passed by the triggering element on mouseover. This results in a broken image link.

My overall goal is to create a dynamic tooltip using the JQueryTools tooltip plugin. My shor term goal, which should solve all my problems, is to query that information properly. I'm guessing there are two ways to do this:

1. Query the title attribute of the triggering object directly
2. Query the tooltip object's content variable which contains the same information

Apparently I can't figure out how to do either one. :) Thanks in advance guys.

Answer 1

The layout option takes only a string as value, so you need to iterate over the set and create the tooltip like

$(function () {
    $("[title]").each(function () {
        $(this).tooltip({
            tipClass: "tooltip",
            layout: '<img src="img' + this.title + '" height="60" border="0" />'
        });
    })
});

Demo: Fiddle