Fatal编程技术网
  • javascript/
  • Javascript 无法在工具提示中显示格式化的HTML

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

javascript c# asp.net asp-classic

Javascript 无法在工具提示中显示格式化的HTML,javascript,c#,asp.net,asp-classic,tooltip,Javascript,C#,Asp.net,Asp Classic,Tooltip,我有一个现有的经典ASP网站，我正在将其转换为C#/ASP.NET。在这个遗留站点中，他们使用以下代码将HTML数据（而不是纯文本）显示为工具提示。现有代码使用HTML格式化一些表，然后使用折旧方法将它们作为工具提示。例如： function EnterContent(layerName, TTitle, TContent, RecordNum) { ContentInfo = '<table border="1" style="width: 200px; border-t

我有一个现有的经典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(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()">

1.此代码允许在工具提示中包含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>




.工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
}
.tooltip.tooltiptext{
可见性：隐藏；
宽度：220px；
背景色：#ffffff；
文本对齐：居中；
边界半径：6px；
边界：1px；
填充：5px0；
位置：绝对位置；
z指数：1；
底部：125%；
左：50%；
左边距：-60px；
不透明度：0；
过渡：不透明度0.3s；
}
.tooltip.tooltiptext:：之后{
内容：“；
位置：绝对位置；
最高：100%；
左：50%；
左边距：-5px；
边框宽度：5px；
边框样式：实心；
边框颜色：#555透明；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
不透明度：1；
}
.tooltip.tooltiptext TH{
背景颜色：蓝色；
颜色：#fff；
}
工具提示
将鼠标移到下面的文本上：

在我上空盘旋
2019年10月28日，星期一，某人的名字
东部时间上午9:11:50

这里有更多数据


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

这里的代码是将工具提示与CSS结合使用的好方法：


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

document.getElementById（RecordNum.innerHTML=“无论什么”

我也是jQuery的忠实粉丝，jQuery内置了许多UI功能：

出于好奇，如果我在创建链接时构建了工具提示信息，它会显示为HTML还是纯文本？我仍然不确定标准控件工具提示是否可以处理纯文本以外的任何内容（即使使用css），Bebandit，你真厉害！甚至没有考虑做一个CSS工具提示类，并在一个div上使用它。我只关注使用TooTip元素，它永远不会显示格式化的HTML。我对它进行了编码，以便在对链接进行编码时使用您的解决方案。很好！非常感谢。（不知道如何解决这个问题，我是否使用“回答你的问题”按钮？）。唯一的问题是我的系统被锁定了，我甚至不能去他们的网站下载。如果我把它下载到我的个人电脑上并通过电子邮件发送，附件就会被删除。不幸的是，我的雇主不允许任何来自外部世界的东西。仅仅安装一个新的AJAX软件包就需要国会通过法案！

   <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">



<!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>