Power BI 超级工具提示
Power BI图表添加工具提示可以为用户提供补充信息，微软官方的工具提示教程参考：
https://learn.microsoft.com/zh-cn/power-bi/create-reports/desktop-tooltips
本文介绍比微软内置工具提示更强大的提示方案：
1. 不需要新建工具提示页
2. 一个图表（视觉对象）可以有不同的工具提示内容
3. 一个图表的不同工具提示页面大小可以不同
这种超级工具提示适用于各种图表场景，比如文本提示图表：
比如表格提示图表：
实现的技术手段是DAX+HTML+CSS＋SVG，代码原理很短，没有基础也可以学会。接下来以长文本添加工具提示为例，其他类型原理相同。
以下是示例度量值，实现效果为
当鼠标悬停在文字A上时会出现一个红色的圆形。悬停在文字B上时，会出现一个蓝色的长方形
M.原理 =
"
<head>
<style>
/* 指定字号 */
p {
font-size: 24px;
}
/* 指定添加工具提示文字的颜色 */
.hover-text {
color: #3498db;
}
/* 当鼠标悬停在需要工具提示的文字时，添加下划线 */
.hover-text:hover {
text-decoration: underline;
}
/* 默认将工具提示的SVG图表隐藏 */
.svg-tooltip {
position: absolute;
visibility: hidden;
}
/* 鼠标悬停时显示SVG图表 */
.hover-text:hover + .svg-tooltip {
visibility: visible;
}
</style>
</head>
<body>
<p>这是一个展示超级工具提示的段落。当鼠标悬停在 <span class='hover-text'>文字A</span>
<svg class='svg-tooltip' width='100' height='100'>
<circle cx='50' cy='50' r='45' fill='red'/>
</svg>
上时，会出现一个红色的圆形。而当你悬停在
<span class='hover-text'>文字B</span>
<svg class='svg-tooltip' width='200' height='80'>
<rect x='0' y='0' rx='20' width='200' height='80' fill='deepskyblue'/>
</svg>
上时，会出现一个蓝色的长正方形。
</p>
</body>"
把度量值放在HTML Content视觉对象即可以看到效果：
度量值中，将需要进行悬停的内容分组（可以是文本、图表），本例为：
class='hover-text'
在悬停内容后面跟上需要工具提示的SVG图表，并标记分组，本例为SVG代码中的：
class='svg-tooltip'
<style>中的CSS通过判断用户是否悬停，决定显示还是隐藏工具提示中的SVG图表。整个链路都是DAX驱动可视化。首先，无论是表格还是饼图、柱形图，使用HTML或者SVG生成，接着，工具提示的内容依然使用SVG生成。工具提示的页面大小、页面内容DAX自由书写。
我的公众号已经提供了海量的相关代码，大家可以搜索查询。以下网址也有海量的工具帮助用户降低门槛。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2025-09-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
