Dotnetnuke 9 工具提示缺少样式答案

【问题标题】：Dotnetnuke 9 tooltip missing styleDotnetnuke 9 工具提示缺少样式
【发布时间】：2021-02-04 13:18:07
【问题描述】：

我想为 DotnetNuke 9.8.1 中的一个模块创建一些精美的工具提示，并查看了https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip_pos&stacked=h 将脚本、样式和链接放入模块的头部，所有这些都可以在html前面看到。

虽然我尝试了各种组合 [如果包括对 Bootstrap 等的外部引用会导致冲突]，W3Schools 示例显示了一个样式精美的工具提示，但 DNN 的“副本”和平常一样……

知道我做错了什么吗？

【问题讨论】：

标签： bootstrap-4 tooltip dotnetnuke

【解决方案1】：

这是我在一个网站上的做法（我应该提到它使用 Bootstrap 3，但这应该不会有太大的区别）：

样式表：

/* 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>

在工具提示中使用 HTML 时，您必须在标题中对其进行 HTML 编码，例如

title="&lt;strong&gt;Bold text&lt;/strong&gt;"

对我来说工作得很好。您可以在此处找到一个示例：[https://ls.innsbruck.gv.at/leben/soziales/mindestsicherung] - 查找带有虚线下划线的单词。

【讨论】：

感谢您如此迅速地回复 - 非常感谢。我在您的网站上注意到您使用 data-original-title 而不是将提示放入标题中。我能问这是为什么吗？使用 title 属性似乎 [几乎] 可以解决问题。 [几乎] 是无论我做什么，我似乎都无法影响 .mt-tooltip-arrow, .mt-tooltip + .tooltip > .tooltip-inner 下的条目定义的 CSS 布局它拒绝移开来自黑色背景！
说实话：我不记得了。我只是在谷歌上搜索了一段时间以找到解决方案，并使用了它。这只是结果的一个例子......

【解决方案2】：

好的，我发现了我的方式的错误:) 问题是我在回发后丢失了新格式化的工具提示。这是解决方案：

$(document).ready(function () {
   $('[data-toggle="tooltip"]').tooltip({
      html: true, placement: 'bottom',
   });
   var parameter = Sys.WebForms.PageRequestManager.getInstance();
    parameter.add_endRequest(function() {
        $('[data-toggle="tooltip"]').tooltip({
          html: true, placement: 'bottom',
    });
    });   
});

【讨论】：