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 !

I would like to be able to target the span to perform some JQuery's script like raty and such things. I posted the html() example to simplify things — Inpu
– Inpu, Commented Apr 8, 2014 at 12:33
I'm guessing that element is only created when the mouse hovers the element. — adeneo
– adeneo, Commented Apr 8, 2014 at 12:35

laaposto · Accepted Answer · 2014-04-08 12:37:57Z

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

answered Apr 8, 2014 at 12:37

laaposto

12.2k15 gold badges61 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rao Ehsan · Accepted Answer · 2014-04-08 12:45:37Z

1

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()
           }
        });

answered Apr 8, 2014 at 12:45

Rao Ehsan

7768 silver badges15 bronze badges

Collectives™ on Stack Overflow

JQuery tooltip: Target Span inside title attribute

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related