如何始终显示ASP.NET TextBox工具提示并完善值对比脚本？

Got it, let's break down how to solve both of your needs—making ASP.NET TextBox tooltips stay visible at all times and finishing that jQuery script to compare the values of two TextBoxes.

By default, browser native tooltips (the title attribute) only show on hover and disappear when you move away. If you want a tooltip that stays visible permanently, you’ll need a custom solution instead of relying on the native title attribute. Here’s a simple, reliable approach:

Step 1: Add custom tooltip containers to your ASP.NET markup #

Add a <span> right next to each TextBox to act as the permanent tooltip. We’ll use ASP.NET’s ClientID to link it properly:

<asp:TextBox ID="TextBox1" runat="server" CssClass="tooltip-target"></asp:TextBox>
<span id="TooltipForTextBox1" class="permanent-tooltip" style="display: none;"></span>

<asp:TextBox ID="TextBox2" runat="server" CssClass="tooltip-target"></asp:TextBox>
<span id="TooltipForTextBox2" class="permanent-tooltip" style="display: none;"></span>

Step 2: Style the tooltip with CSS #

This makes the tooltip look clean and positioned correctly relative to the TextBox:

.permanent-tooltip {
    margin-left: 8px;
    padding: 4px 8px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
}

Step 3: Use jQuery to control visibility and content #

We’ll show the tooltip on page load and update its content whenever the TextBox value changes:

$(document).ready(function() {
    // Get references to TextBoxes and their tooltips
    const textBox1 = $("#<%=TextBox1.ClientID%>");
    const tooltip1 = $("#TooltipForTextBox1");
    const textBox2 = $("#<%=TextBox2.ClientID%>");
    const tooltip2 = $("#TooltipForTextBox2");

    // Show tooltips immediately when the page loads
    tooltip1.show();
    tooltip2.show();

    // Update tooltip content whenever values change
    textBox1.on("keyup change paste", function() {
        tooltip1.text(textBox1.val() === textBox2.val() ? "MATCH" : "NO MATCH");
    });

    textBox2.on("keyup change paste", function() {
        tooltip2.text(textBox2.val() === textBox1.val() ? "MATCH" : "NO MATCH");
    });
});

Pro tip: If you absolutely need to use the native title attribute (not recommended for permanent visibility), you can mirror its value to the custom tooltip—but the above method is far more flexible for styling and control.

Your existing code has a solid start, so let’s clean it up and make it more efficient. Here’s the full, optimized version:

Full Working Script #

First, confirm you have jQuery loaded (you already included this, but just to double-check):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Then the comparison script (merged with the tooltip logic for convenience):

$(document).ready(function() {
    // Get jQuery references directly (no need for document.getElementById + jQuery wrap)
    const $t1 = $("#<%=TextBox1.ClientID%>");
    const $t2 = $("#<%=TextBox2.ClientID%>");

    // Reusable function to update tooltips and visual feedback
    function updateComparisonState() {
        const valuesMatch = $t1.val() === $t2.val();
        
        // Update custom tooltips
        $("#TooltipForTextBox1").text(valuesMatch ? "MATCH" : "NO MATCH");
        $("#TooltipForTextBox2").text(valuesMatch ? "MATCH" : "NO MATCH");

        // Optional: Add visual highlight to TextBoxes
        if (valuesMatch) {
            $t1.addClass("match").removeClass("no-match");
            $t2.addClass("match").removeClass("no-match");
        } else {
            $t1.addClass("no-match").removeClass("match");
            $t2.addClass("no-match").removeClass("match");
        }
    }

    // Run on page load to set initial state
    updateComparisonState();

    // Trigger updates whenever either TextBox is modified
    $t1.on("keyup change paste", updateComparisonState);
    $t2.on("keyup change paste", updateComparisonState);
});

Key Improvements: #

• Simpler Selectors: Directly use $("#<%=TextBox1.ClientID%>") instead of wrapping document.getElementById—it’s cleaner and more efficient.
• Reusable Logic: The updateComparisonState() function avoids code duplication when handling both TextBoxes.
• Comprehensive Event Coverage: Added change and paste events to catch all ways the TextBox value can be modified (not just typing).
• Optional Visual Feedback: Add this CSS if you want to highlight matching/non-matching TextBoxes:

.match { border: 2px solid #2ecc71; }
.no-match { border: 2px solid #e74c3c; }

内容的提问来源于stack exchange，提问作者L.Johnson