How do I get the contents of the "title" tag in the element "span" with jQuery?

Question

Hey all,

I have a "span" element inside a "table" "td" element. The span tag has a Title.

I want to get the title of that span tag and pull it out to make it the "mouseover" tip for the "td" element.

For example:

I want to turn this:

                <td>
                <a href="#"><span id="test" title="Acres for each province">Acres</span></a>
            </td>

Into this:

                <td onmouseover="tip(Acres for each province)">
                <a href="#"><span id="test">Acres</span></a>
            </td>

EDIT: I don't think you guys understand. I am trying to put the onmouseover function into the "td" tag. I am NOT trying to put it into the "span" tag.

EDIT: So I am trying every single one of your answers and I am still not getting it. I have been able to access the "td" tag without a problem. For some reason, I can't insert the attribute onmouseover="tip(this, 'This is a tip')" into the "td" tag. HELP?

Answer 1

something like:

$("span#test").mouseover( function () {
        tip($(this).attr("title"));
    }

Answer 2

With jQuery:

$('#test').attr('title')

Answer 3

Based on your edit, you might check out jQuery's DOM traversal methods: http://docs.jquery.com/Traversing

Something along these lines (not tested, I don't claim it's syntactically correct, just general ideas here)...

$("td").each(function()
{
    $(this).mouseover(function()
    {
        tip($(this).children("span").attr("title"));
    });
});

Answer 4

If you cant put a class on the td or select it in some way then start by selecting the span, then go to the span's grandparent and attach to the mouseover:

// get each span with id = test
$("span#test").each(function(){
    var $this = $(this);
    // attach to mouseover event of the grandparent (td)
    $this.parent().parent().mouseover( function () {
        tip($this.attr("title"));
    }
);

Answer 5

Ok, I'll try it too :P

$("#yourTable").find("td").over(function()
  { generateTip($(this).find("span:first").attr("title") }
  , function() { removeTip() }
)

What this does:

• Get the table with id yourTable
• Select all its td
• insert a mouseover and mouseout event
• mouseover event : call the generateTip function with the title value of the first span in that td
• mouseout event : call the removeTip() (optionnal) function.