jQuery-ui Tooltip get Title on click

Question

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?

Dom · Accepted Answer · 2013-03-01 02:25:44Z

1

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!

answered Mar 1, 2013 at 2:25

Dom

40.7k12 gold badges56 silver badges83 bronze badges

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

1 Comment

David Svensson Over a year ago

Old question but for anyone else looking for this I would propose saving the current title in a data attribute on the element instead of looking for the aria-descriedby-tag. For instance we're using some custom HTML inside the tooltip that would screw up the proposed solution. Easiest way of solving it is adding something like $(this).data('current-title', element.attr('title')); to the content function and then look for that data-attribute on click, if it does not exist use title instead.

Collectives™ on Stack Overflow

jQuery-ui Tooltip get Title on click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related