bootstrap 4 - Dotnetnuke 9 tooltip missing style

Question

I want to create some fancy tooltips for a module in DotnetNuke 9.8.1 and took a look at https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip_pos&stacked=h putting the script, style and linkage into the header of the module, all of which can be seen ahead of the html.

Although I've tried various combinations [in the event that including external references to the Bootstrap etc., causes conflicts], The W3Schools example shows a nicely styled tooltip, but the DNN 'replica' is as normal....

Any idea what I'm doing wrong?

question from:https://stackoverflow.com/questions/66046477/dotnetnuke-9-tooltip-missing-style

Answer 1

Here is how I did it on one site (I should mention that it uses Bootstrap 3, but this should not make too much difference):

Stylesheet:

/* Tooltip */
tooltip-arrow, .mt-tooltip + .tooltip > .tooltip-inner
{
   background-color: #ffff8d;
   color: #000;
   font-size: 16px;
   min-width: 150px;
   max-width: 400px;
   z-index: 9999;
   text-align: left;
   line-height: 24px;
   border-radius: 3px;
   box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.27);
   max-width: 100%;
   white-space: nowrap;
   font-family: Arial, Helvetica, Sans-Serif;
}

.tooltip.in
{
    opacity:1;
    filter:alpha(opacity=100);
}

a.mt-tooltip
{
   border-bottom: 1px dotted #333333;
   color: #333333;
   text-decoration: none;
}

Jquery:

$(document).ready(function () {
   $('[data-toggle="tooltip"]').tooltip({
      html: true
   });
});

HTML:

<p>
   Lorem ipsum dolor sit amet, consetetur
   <a href="#" class="mt-tooltip" data-toggle="tooltip" title="At vero eos et accusam et justo duo dolores et ea rebum.">sadipscing</a>
   elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
   erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
   Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
   tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
   vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
   no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

When using HTML in the tooltip, you have to HTML-encode encode it in the title, like

title="<strong>Bold text</strong>"

Worked fine for me. You can find an example here: [https://ls.innsbruck.gv.at/leben/soziales/mindestsicherung] - look for words with dotted underlines.