时间戳

首页 > 解决方案 > 无法在工具提示中显示格式化的 HTML

javascript - 无法在工具提示中显示格式化的 HTML

问题描述

我有一个现有的经典 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 专家，所以如果我有后续问题，请提前道歉。

标签： javascriptc#asp.netasp-classictooltip

解决方案

此代码允许您在工具提示中包含 html。请根据需要更改 css 样式：

<!DOCTYPE html>
<html>
<style>
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 220px;
            background-color: #ffffff;
            text-align: center;
            border-radius: 6px;
            border: 1px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }

            .tooltip .tooltiptext::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #555 transparent transparent transparent;
            }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        .tooltip .tooltiptext TH {
            background-color: blue;
            color: #fff;
        }
</style>
<body style="text-align:center;">

    <h2>Tooltip</h2>
    <p>Move the mouse over the text below:</p>

    <div class="tooltip">
        Hover over me
        <span class="tooltiptext">
            <table>
                <tr>
                    <th>
                        SOMEONES NAME <br>on Monday, October 28, 2019
                        at 9:11:50 AM EST<br>
                    </th>
                </tr>
                <tr>
                    <td valign="top">
                        More data here
                    </td>
                </tr>
            </table>

        </span>
    </div>

</body>
</html>

几个想法：也许您可以在创建链接时创建工具提示信息（而不是即时创建）。当您将鼠标悬停在它上面时，您也可以使用 ajax 调用来获取信息。

此处找到的代码是使用 CSS 工具提示的好方法： https ://www.w3schools.com/howto/howto_css_tooltip.asp

看来您正在更改标题。原始代码更改了innerHTML。您仍然可以使用以下语法分配 div 的 innerHTML：

document.getElementById(RecordNum).innerHTML = "whatever";

我也是 jQuery 的忠实粉丝，它内置了许多 UI 功能： https ://jqueryui.com/tooltip/

推荐阅读