Geek Answers Handbook

Specify CSS styles for jQuery UI Tooltip

I am using jquery ui 1.9 on ajax based website.

I have the following code:

This is a <span title="Some warning" class="warning">warning</span> message<br /> This is a <span title="Some info" class="info">info</span> message

Using jQuery ui tooltip will work even for dynamic content:

 $(function() { $( document ).tooltip(); });

But I need different hint styles for each of these message types. For example, red is for warning and blue is for information, and it should also work for dynamic content.

Any ideas?

+4
source share
2 answers

You need to use the toolTipClass property to specify the css class

 $(document).ready(function() { $( ".warning" ).tooltip({ tooltipClass: "warning-tooltip" }); $( ".info" ).tooltip({ tooltipClass: "info-tooltip" }); });
+13
source

Firstly, here is the code that works:

 $(function() { $('#warning-binder-element').tooltip({ items: '.warning', tooltipClass: 'warning-tooltip', content: function () { return $(this).prev('.warning-toast').html(); }, position: { my: "right bottom", at: "right top-10" } }); $('#info-binder-element').tooltip({ items: '.info', tooltipClass: 'info-tooltip', content: function () { return $(this).closest('.doo-hicky').next('.info-toast').html(); }, position: { my: "left bottom", at: "left+10 top-10" } }); });

A few notes above:

  • The selector for .tooltip() is not the element that you want to enable the tooltip, it is the element on the page to which the tooltip object and related events are attached.
  • If you try to link two tooltips with the same object, only the last one remains, so binding as to $(document) will not work (that’s why I linked two different tooltips with two different elements on the page).
  • you can attach a tooltip object to an element that receives a tooltip, but if you use the class selector, this can lead to unpleasant consequences.
+7
source

More articles:


All Articles