Show two jQuery UI ToolTips at once

Question

Using the jQuery UI ToolTip plug-in, how can one show multiple ToolTips at once?

My reason for showing up to two ToolTips is because I have an informational message for a field and, potentially, an error message for the field.

The current HTML is as follows:

<li title="This is an informational ToolTip message">
  <input type="text" class="error" title="This is an error ToolTip message">
</li>

The current JavaScript:

$('body').tooltip({
  track: true
});
$('body').tooltip({
  items: '.error',
  position: {my: 'left bottom-15', at: 'left top', collision: 'flipfit'},
  track: true
});

The current problem is that when entering the <li>, the informational ToolTip displays properly, but when the mouse enters over the field itself, the informational ToolTip fades out and the error ToolTip alone is displayed. I need both to display at the same time.

Answer 1

I force your question work. but it's so ugly. I am not recommend you do this. but give your idea.

the idea is using one tooltip open/close event to control other tooltips programmatically.

please see jsfiddle example ：jsfiddle

   $('li').tooltip({
  track: true,
    open: function( event, ui ) {
      $('input').tooltip('open');
  },
    close: function( event, ui ) {
      $('input').tooltip('close');
  }
});
$('input').tooltip({
  items: '.error',
  position: {my: 'left bottom-15', at: 'left top', collision: 'flipfit'},
  track: true,
  open: function( event, ui ) {
      $('li').tooltip('open');
  },
    close: function( event, ui ) {
      $('li').tooltip('close');
  }

});

Answer 2

If it were me... I'd just include the text from the first tooltip at the bottom of the contents of the error tooltip...

var i="this is INFO tooltip text"

Tooltip 1 = i

Tooltip 2 = "Error text" + i

Sorry, can't give you real code because I don't use jquery - just javascript, but should be simple enough anyways...

Answer 3

You should have to apply preventDefault() into OnOver listener of li element.