ASP.Net Web Forms：如何为title属性添加样式自定义方形提示框

原生title属性无法直接自定义样式，需要通过CSS+自定义属性/元素的方式实现方形提示框，以下是两种可行方案：

方案一：CSS伪元素实现（轻量无JS） #

1. 修改后台代码 #

替换原生title为data-tooltip属性，并添加自定义类名用于定位：

protected string GetUnsupportedIcon(MNDto a)
{
    if (!a.Supported)
    {
        // 对提示文本做HTML转义，避免语法错误和XSS风险
        var encodedMessage = HttpUtility.HtmlEncode(message);
        return $@"<i class=""fa fa-warning custom-tooltip-trigger"" data-tooltip='{encodedMessage}' style=""color:#EEA42E;font-size:16px""></i>";
    }
    else 
    {
        return $@"<i class=""hidden""></i>";
    }
}

2. 添加CSS样式 #

在页面的<style>标签或外部CSS文件中加入以下样式，实现方形提示框：

/* 触发元素设为相对定位，用于提示框定位 */
.custom-tooltip-trigger {
    position: relative;
    cursor: help;
}

/* 方形提示框样式，默认隐藏 */
.custom-tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%; /* 显示在图标上方 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px; /* 方形效果，设为0就是纯直角 */
    white-space: nowrap;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    border: 1px solid #ddd;
}

/* 可选：添加提示框下方的箭头 */
.custom-tooltip-trigger::before {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 鼠标悬停时显示提示框和箭头 */
.custom-tooltip-trigger:hover::after,
.custom-tooltip-trigger:hover::before {
    opacity: 1;
}

方案二：DOM元素+CSS实现（支持复杂内容） #

如果需要提示框支持换行、富文本等复杂内容，可采用此方案：

1. 修改后台代码 #

在图标旁添加隐藏的提示框DOM元素：

protected string GetUnsupportedIcon(MNDto a)
{
    if (!a.Supported)
    {
        var encodedMessage = HttpUtility.HtmlEncode(message);
        return $@"<div class=""tooltip-wrapper"">
                    <i class=""fa fa-warning"" style=""color:#EEA42E;font-size:16px""></i>
                    <div class=""custom-tooltip"">{encodedMessage}</div>
                  </div>";
    }
    else 
    {
        return $@"<i class=""hidden""></i>";
    }
}

2. 添加CSS样式 #

.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

/* 方形提示框样式 */
.custom-tooltip {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    white-space: normal;
    max-width: 200px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 箭头样式 */
.custom-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #ccc transparent transparent transparent;
}

.custom-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    margin-top: 1px;
}

/* 悬停显示提示框 */
.tooltip-wrapper:hover .custom-tooltip {
    opacity: 1;
}

注意事项 #

• 必须对提示文本做HttpUtility.HtmlEncode处理，避免HTML语法错误和XSS攻击风险。
• 可根据需求调整CSS中的背景色、边框、内边距等属性，实现不同风格的方形提示框。

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