4

I'm initializing tooltips with following code:

$('.tooltip').each(function () {
    $(this).tooltip({
      html: true,
      title: $('#' + $(this).data('tip')).html()
    });
});

Example of tooltip code:

<div class="tooltip">
 <div class="inner">
  <div class="tooltip__content">
   <ul>
    <li>
     <div class="rating">
      <div class="level" style="width: 85%;" data-width="85"></div>
     </div>
    </li>
   </ul>
  </div>
 </div>
</div>

My problem is that tooltip completely ignores my inline css/data styles e.g.

<div class="level" style="width: 85%;" data-width="85"></div>

is rendered as

<div class="level">

Is there solution to disable bootstrap tooltip removing of inline styles?

Damian
  • 151
  • 8
  • I imagine that the Bootstrap team wanted to minimize complication in rendering tooltips. Any reason you can't use CSS classes instead? – isherwood Oct 30 '19 at 21:39
  • See also: https://stackoverflow.com/questions/55067557/bootstrap-input-field-inside-tooltip-popover-removed-from-output-html – isherwood Oct 30 '19 at 21:47
  • @isherwood thank you! sanitize: false made this to work :) Gratefuly without use of many css classes because this tooltip content varies through whole site:) – Damian Oct 30 '19 at 22:00
  • Good to hear. Be sure to accept your answer. – isherwood Oct 31 '19 at 13:14

1 Answers1

11

Setting argument santize: false resolved issue:

$('.tooltip').each(function () {
  $(this).tooltip({
    html: true,
    sanitize: false,
    title: $('#' + $(this).data('tip')).html()
  });
});
Damian
  • 151
  • 8