将Popover触发方式改为Hover的技术需求及相关代码说明

Got it, let's adjust your popover to trigger on hover instead of the default click. Here's the tweaked code and a quick breakdown of what changed:

Modified JavaScript Code #

$(document).ready(function () { 
    Address.initialize(); 
    Note.initializeIndex(); 
    Child.initializeEditBillPayer(); 
    AuditLog.Initialise(); 

    if ($(".aged-debetors").length !== 0) { 
        // First set the popover content, then initialize with hover trigger
        $('.aged-debetors-label').attr("data-content", $(".aged-debetors").html());
        $("[data-toggle=popover]").popover({
            trigger: 'hover', // This switches the trigger to hover
            delay: { show: 200, hide: 500 } // Optional: Adds smooth delay to avoid flickering
        }); 
    } 
}); 

Key Adjustments Explained #

• Added trigger: 'hover' to the popover initialization: This tells Bootstrap to show/hide the popover when the user hovers over the label, instead of requiring a click.
• Optional delay property: This small timing buffer makes the popover feel more natural—prevents it from popping up/disappearing instantly if your mouse moves quickly over the element.

Your HTML Stays the Same #

<span class="label label-info aged-debetors-label" 
      data-toggle="popover" 
      data-placement="auto right" 
      data-html="true" 
      data-content="" 
      data-original-title="" 
      title=""> 
    当前余额：@Html.DisplayFor(modelItem => Model.TotalUnpaidAmount) 
</span>

Swap out your original JavaScript with the modified version, and your popover will now activate on hover!

内容的提问来源于stack exchange，提问作者user8788939