Ralph David Abernathy Ralph David Abernathy - 3 months ago 19
jQuery Question

How to wrap jqueryUI tooltip with custom div?

So by default, a tooltip is created with the parent div containing

.ui-tooltip
. Is there any way I can do something like this to wrap
.ui-tooltip
in a custom div, without using another library?

$(tooltipTrigger).tooltip({
tooltipClass: "custom-tooltip-styling", // this works
tooltipWrapper: "<div class='custom-tooltip-wrapper'></div>" // this is what I want to work
});


I basically want the output to look like this:

<div class="custom-tooltip-wrapper">
<div class="ui-tooltip custom-tooltip-styling"></div>
</div>


I tried using
.wrap()
within
.tooltip()
, but that didn't seem to work. Any ideas?

Answer

You could use the open - event to wrap your div around the created tooltip:

$(document).tooltip({
   tooltipClass: "custom-tooltip-styling",
   open: function(event, ui) {
     $(ui.tooltip).wrap("<div class='custom-tooltip-wrapper'></div>");
   },
   close: function(event, ui) {
     $('.custom-tooltip-wrapper').remove();
   }
 });

However, you need to style your wrapper accordingly, it otherwise will just appear at the end of the page. I use the close - event here to get rid of the wrapper afterwards.


Example