【发布时间】：2020-02-10 21:29:48
【问题描述】：
我有一个现有的经典 ASP 站点，我正在将其转换为 C#/ASP.NET。在这个遗留站点中，他们使用以下代码将 HTML 数据（而不是纯文本）显示为工具提示。现有代码使用 HTML 格式化一些表格，然后使用一种折旧的方法使它们成为工具提示。示例：
function EnterContent(layerName, TTitle, TContent, RecordNum) {
ContentInfo = '<table border="1" style="width: 200px; border-top-color: #808080; border-right-color: #808080; border-bottom-color: #808080; border-left-color: #808080; padding:0; border-spacing:0 ">' +
'<tr><td style="width: 100%; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000">' +
'<table border="0" style="width: 100%;padding: 0; border-spacing: 0; background-color: #C0C0C0">' +
'<tr><td style="width: 100%; border-top-color: ' + topColor + '; border-right-color: ' + topColor + '; border-bottom-color: ' + topColor + '; border-left-color: ' + topColor + '">' +
'<table style="width: 100%;padding :0;border-spacing: 0;text-align: center" >' +
'<tr><td style="width: 100%; background-color: #0000FF">' +
'<div class="tooltiptitle">' + TTitle + '</div>' +
'</td></tr>' +
'</table>' +
'</td></tr>' +
'<tr><td style="width: 100%; border-top-color: ' + subColor + '; border-right-color: ' + subColor + '; border-bottom-color: ' + subColor + '; border-left-color: ' + subColor + '">' +
'<table {padding:5} style="width: 100%;border-spacing: 0;text-align: center">' +
'<tr><td >' +
'<font class="tooltipcontent">' + TContent + '</font>' +
'</td></tr>' +
'</table>' +
'</td></tr>' +
'</table>' +
'</td></tr>' +
'</table>';
ReplaceContent(ContentInfo, RecordNum)
}
这是他们在遗留代码中的做法：
function ReplaceContent(layerName){
if(ie){document.all[layerName].innerHTML = ContentInfo}
if(ns){
with(document.layers[layerName].document) {
open();
write(ContentInfo);
close();
}
}
}
注意它使用文档层来填充工具提示。这是折旧的，不适用于现代浏览器。这是我想出的：
function ReplaceContent(ContentInfo, RecordNum) {
var HTMLElement = document.getElementById(RecordNum)
// alert(ContentInfo)
HTMLElement.title = ContentInfo
}
这种作品。它显示了一个工具提示，但工具提示中的信息是 HTML 格式表格的纯文本。我不确定您是否可以成功地将 HTML 填充到工具提示中（我看到帖子说您可以也不能）。
在我的版本中，RecordNum 是控件 ID（在本例中，它是第一行中的 TD）。此处示例：
<b>1.</td><td width="100%" ID= \"" + aActions[i,0] + "\" runat=\"server\ "><span onMouseover="EnterContent('ToolTip','New Assignment','<b>Action Taken by:</b>
<br>SOMEONES NAME<br>on Monday, October 28, 2019<br>at 9:11:50 AM EST<fieldset style=padding:2>
<legend><b>Comment</b>
</legend> SOMEONES NAME has been assigned as Person initiating the Help Call (Caller).</fieldset>'); Activate();"'
onmouseout="deActivate()">
这是打开链接页面的第二部分（它工作正常）：
<a href="javascript:ActionDetail(2257126);"><font class="ActionName"><b>New Assignment</a></span> </font><br></font>
<span id="actionspan2" style="display=none;"><font class="ActionData"> SOMEONES NAME <br>on Monday, October 28, 2019<br>
at 9:11:50 AM EST<br></span>
</font></td></tr><tr><td width="19" valign="top"><center><font class="ActionData">
所以，我的问题是我可以在工具提示中获得正确的文本，但它不会以 HTML 格式显示。我已经测试了 HTML 代码以确保它不是问题所在。我将它粘贴到 .aspx 页面并验证它是否正确显示。我无论如何都不是 Javascript 专家，所以如果我有后续问题，请提前道歉。
【问题讨论】：
-
我可以建议查看 Bootstrap 的工具提示，因为它们支持 HTML 代码：getbootstrap.com/docs/4.0/components/tooltips 或使用 MDBootstrap 和 popper：mdbootstrap.com/docs/jquery/javascript/tooltips 或 Bootstrap 的弹出窗口：getbootstrap.com/docs/4.0/components/popovers
-
我喜欢 mdbootstrap，看起来我可以让它工作。唯一的问题是我的系统被锁定，我什至不能去他们的网站下载。如果我将它下载到我的个人计算机上并通过电子邮件发送，附件就会被删除。不幸的是，我的雇主不允许来自外界的任何东西。只是为了安装一个新的 AJAX 包就需要国会的行动！
标签： javascript c# asp.net asp-classic tooltip