Ralph David Abernathy Ralph David Abernathy - 2 months ago 16x
jQuery Question

How to wrap jqueryUI tooltip with custom div?

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

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

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>

I tried using
, but that didn't seem to work. Any ideas?


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

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

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.