Dotnetnuke 9工具提示缺少样式
Dotnetnuke 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‘复制品’和正常的一样.
知道我做错什么了吗？
回答 2
Stack Overflow用户
发布于 2021-02-04 14:58:10
下面是我是如何在一个站点上这样做的(我应该提到它使用了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时，必须在标题中对其进行编码，如下所示
title="<strong>Bold text</strong>"对我来说很好。你可以在这里找到一个例子: https://ls.innsbruck.gv.at/leben/soziales/mindestsicherung -寻找带有点下划线的单词。
Stack Overflow用户
发布于 2021-08-23 16:56:49
好的，我发现了我的方法的错误:)问题是我在回发后丢失了新格式化的工具提示。以下是解决办法：
$(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',
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66046477
复制相关文章
相似问题
腾讯云开发者
