Keep jQuery tooltip open on click?

Question

I want to use jQuery UI's tooltip feature, however I need it so when you click an element (in my case an image) the tool tip stays open. Can this be done? I couldn't see any options for this.

http://api.jqueryui.com/tooltip/

UPDATE here is my code. I thought the 4th line should work but sadly not:

HTML

<img class="jqToolTip" src="/query.gif" title="Text for tool tip here">

Javascript

$('.jqToolTip').tooltip({
    disabled: false    
}).click(function(){    
    $(this).tooltip( "open" );
//  alert('click');
}).hover(function(){
    // alert('mouse in');
}, function(){
    // alert('mouse out');
});

is the tooltip set on the image

Arun P Johny
– Arun P Johny

2013-03-27 17:08:51 +00:00
Commented Mar 27, 2013 at 17:08 — Arun P Johny
– Arun P Johny, Commented Mar 27, 2013 at 17:08

mpd · Accepted Answer · 2015-04-06 19:22:00Z

I was trying to solve the same exact problem, and I couldn't find the answer anywhere. I finally came up with a solution that works after 4+ hours of searching and experimenting.

What I did was this:

Stopped propagation right away if the state was clicked
Added a click handler to track the state

//This is a naive solution that only handles one tooltip at a time
//You should really move clicked as a data attribute of the element in question
var clicked;
var tooltips = $('a[title]').on('mouseleave focusout mouseover focusin', function(event) {
  if (clicked) {
    event.stopImmediatePropagation();
  }
}).tooltip().click(function() {
  var $this = $(this);
  var isOpen = $this.data('tooltip');
  var method = isOpen ? 'close' : 'open';
  $this.tooltip(method);
  //verbosity for clarity sake, yes you could just use !isOpen or clicked = (method === 'open')
  if (method === 'open') {
    clicked = true;
  } else {
    clicked = false;
  }
  $this.data('tooltip', !isOpen);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" rel="stylesheet" />
<a href="#" title="That's what this widget is">Tooltips</a>

Hopefully this will help a future googler.

Thanks in part to this post

isherwood · Accepted Answer · 2013-03-27 17:14:40Z

0

http://api.jqueryui.com/tooltip/#method-open

$('img.my-class').click(function() {
    $(this).tooltip( "open" );
}

edited Mar 27, 2013 at 17:14

answered Mar 27, 2013 at 17:06

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

5 Comments

Arun P Johny Over a year ago

it works only of the clicked element and the element with tooltip are different. Else it won't work

isherwood Over a year ago

FYI, since you haven't provided any code in your question, it's unreasonable to expect a specific answer. You may need to update selectors to get this to work in your case.

Arun P Johny Over a year ago

FYI I'm not the guy who asked the question

Arun P Johny Over a year ago

If you click on the anchor element, it won't stay open

Evanss Over a year ago

Ive updated my question with my attempt at using your code but its not worked. Thanks

Collectives™ on Stack Overflow

Keep jQuery tooltip open on click?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related