How to wrap jqueryUI tooltip with custom div?

Question

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 1

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