Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

bootstrap 4 - Dotnetnuke 9 tooltip missing style

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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="&lt;strong&gt;Bold text&lt;/strong&gt;"

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...