JQuery tooltip: Target Span inside title attribute

Question

I have a div with the following code :

<div id='mydiv' title="<span id='myspan'>Hi there</span>">

I'm using the JQuery's tooltip

            $("#mydiv").tooltip({
                content: function () {
                    return $(this).prop('title');
                },
               open: function (event, ui) {
                   ui.tooltip.css("max-width", "800px")

               },
               position:{
                    my:"left+10 top+25",
                    at:"left top"
               }
            });

The Tooltip works fine, however I'm unable to target the span inside the tooltip, $('#myspan').html() returns null.

Any ideas ?

Thanks !

Answer 1

It is because of how the jQuery tooltip works. Every time you hover your div a element is created with the tooltip and attached to DOM. Every time you remove hover this element is removed from the DOM. So you can not target it. There isn't at the DOM. In the DOM its only when you hover your div.

Here an example to understand this better:

$( "#mydiv" ).hover(
  function() {
    alert($('#myspan').html());
  });

This will give you the tooltip element. But unless you hover in your div cannot target your tooltip

DEMO

Answer 2

Try utilizing onShow event

$("#mydiv").tooltip({
            content: function () {
                return $(this).prop('title');
            },
           open: function (event, ui) {
               ui.tooltip.css("max-width", "800px")

           },
           position:{
                my:"left+10 top+25",
                at:"left top"
           },
           onShow: function() {
           $('#myspan').html()
           }
        });