Question

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

尽管我已经尝试了各种组合[在包括对 Bootstrap 等的外部引用导致冲突的情况下]，W3Schools 示例显示了一个样式很好的工具提示，但 DNN 的“副本”正常....

知道我做错了什么吗？

Answer 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;
}

查询：

$(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] - 查找带有虚线下划线的单词。

Dotnetnuke 9 工具提示缺少样式

1 个答案: