Search code examples
javascriptc#asp.netasp-classictooltip

Unable to show formatted HTML in Tooltip

I have an existing Classic ASP site that I am converting to C#/ASP.NET. In this legacy site, they use the following code to display HTML data (as opposed to plain text) as a tooltip. The existing code formats some tables using HTML and then uses a depreciated method to make them a tooltip. Example:

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)
    }

And here is the way they did it in the legacy code:

 function ReplaceContent(layerName){
   if(ie){document.all[layerName].innerHTML = ContentInfo}

   if(ns){
          with(document.layers[layerName].document) {
                 open();
                 write(ContentInfo);
                 close();
          }
   }

}

Notice it uses Document Layers to populate the tooltip. This is depreciated and will not work with modern browsers. Here is what I came up with:

       function ReplaceContent(ContentInfo, RecordNum) {
        var HTMLElement = document.getElementById(RecordNum)
    //    alert(ContentInfo)
        HTMLElement.title = ContentInfo

}

This kind of works. It shows a tooltip, but the info in the tool tip is the plain text of the HTML formatted tables. I am not sure that you can even populate HTML successfully into the tooltip (i've seen posts say you can and can't).

In my version, RecordNum is the control ID (in this case, its a TD in the first line). Example here:

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

This is the 2nd part that opens the links page (it is working correctly):

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

Here is how the tooltip is suppose to appearLegacy Tool Tip

So, my problem is that I can get the proper text to the tooltip, but it doesn't display in an HTML format. I have tested the HTML code to make sure it was not the problem. I pasted it into the .aspx page and verified it displays correctly. I am not a Javascript expert by any means, so apologies in advance if I have follow up questions.

Solution

  • This code allows you to have html in a tooltip. Please change the css styling as needed:

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

    A couple ideas: Perhaps you could create the tooltip information when you create the links (instead of on the fly). You can also use an ajax call to get the information when you hover over it as well.

    The code found here is a good way to use tooltips with CSS: https://www.w3schools.com/howto/howto_css_tooltip.asp

    It looks like you are changing the title. The original code changes the innerHTML. You can still assign the innerHTML of the div using this syntax:

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

    I am also a big fan of jQuery which has many of the UI features built in: https://jqueryui.com/tooltip/