ASP.NET 圖片懸停顯示動態信息：Tooltip 屬性與客戶端模板最簡實現

需求

鼠標懸停圖片顯示後台動態數據（姓名、性別、年齡、座標），不覆蓋圖片，顯示在旁邊/上方。

最簡方案：原生 Tooltip

<asp:Image ID="imgUser" runat="server" ImageUrl="~/photo.jpg"
    ToolTip='<%# "姓名:" + Eval("Name") + "
性別:" + Eval("Gender") + "
年齡:" + Eval("Age") %>' />

為換行符。瀏覽器原生 Tooltip 顯示在鼠標附近，無需額外 JS/CSS。

進階方案：自定義懸浮層（更美觀、可控位置）

1. 後台綁定數據屬性：
   

   imgUser.Attributes["data-info"] = JsonConvert.SerializeObject(new {
       Name = "張三", Gender = "男", Age = 28, X = 100, Y = 200
   });

2. 前端 JS 初始化（jQuery + Tooltipster / Popper.js / 原生）：
   

   $("#<%=imgUser.ClientID%>").tooltipster({
       content: function(callback) {
           var data = JSON.parse($(this).attr('data-info'));
           var html = `姓名: ${data.Name}<br>性別: ${data.Gender}<br>年齡: ${data.Age}<br>座標: (${data.X}, ${data.Y})`;
           callback(html);
       },
       position: 'right', // top/bottom/left/right
       trigger: 'hover',
       animation: 'fade',
       delay: 100,
       theme: 'tooltipster-borderless'
   });

純 CSS 方案（無 JS 依賴）

.img-wrap { position: relative; display: inline-block; }
.img-wrap .tooltip {
    visibility: hidden; opacity: 0; transition: opacity .2s;
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    background: #333; color: #fff; padding: 8px 12px; border-radius: 4px; white-space: nowrap;
    margin-left: 8px;
}
.img-wrap:hover .tooltip { visibility: visible; opacity: 1; }

<div class="img-wrap">
    <asp:Image ID="imgUser" runat="server" />
    <div class="tooltip"><%# "姓名:" + Eval("Name") + "<br/>性別:" + Eval("Gender") ... %></div>
</div>

選擇建議

• 信息簡單、無交互 → 原生 ToolTip。
• 需豐富樣式、HTML 內容、精確定位 → Tooltipster / Popper.js。
• 輕量、無依賴、僅靜態信息 → 純 CSS。