Как обернуть jQueryUI tooltip с пользовательским div?

Question

Итак, по умолчанию всплывающая подсказка создается с родительским div, содержащим .ui-tooltip. Есть ли способ сделать что-то подобное, чтобы обернуть .ui-tooltip в пользовательский div, без использования другой библиотеки?

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

Я в принципе хочу выход выглядеть следующим образом:

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

Я попытался с помощью .wrap() в .tooltip(), но это не похоже на работу. Есть идеи?

Answer 1

Вы можете использовать open - событие, чтобы обернуть DIV вокруг созданной подсказки:

$(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(); 
    } 
}); 

Однако, вам нужно укладывать обертки соответственно, в противном случае будет просто появляться в конце страницы. Я использую close - событие здесь, чтобы потом избавиться от обертки.

---

Example