CODEWITHSUNDEEP
jquery-uijquery-ui-tooltip
lsu_guy
lsu_guy

Reputation: 1595

jQuery-ui Tooltip get Title on click

I'm working with jquery-ui. I can create elements with titles and show the titles. However on a click, I would like to take the title and populate another div (this is because touch enabled devices do not have tooltips). I can get a click event, but I can't get the title while in the click event.

  $("div").click(function( event ) {
      // just to prove that we are entering this event
      $("#preShow").html ( Date() );

      // show the title
      var toolTip = this.attributes.title.value;
      $("#show").html ( toolTip );

      // just to prove that there was no crash
      $("#postShow").html ( Date() );
  });

I have also tried using 

  var toolTip = $(this).attr ("title");

Here is the jsfiddle showing the problem

http://jsfiddle.net/jK5xQ/

The same code works if I create an HTML file and run it in Firefox with a breakpoint at the first line of the click event. Has anyone experienced this?

Upvotes: 0

Views: 4262

Answers (1)

Dom
Dom

Reputation: 40459

This is because jQueryUI's Tooltip removes the title and uses it. Try going about it like this...

$(document).ready(function () {
    $( document ).tooltip( {
        track:    true,
        content:  function() {
            return  $( this ).attr( "title" );
        }
    });      
    $('div').click(function(){
        $('#show').html($('#' + $(this).attr('aria-describedby')).children().html());
    });
});

DEMO: http://jsfiddle.net/jK5xQ/4/

Let me know if you have any questions!

Upvotes: 1

Related Questions