Power BI Super Tooltips by DAX

This post introduces a more powerful tooltip solution than Power BI's built-in tooltips:

1. No need to create a  tooltip page

2. A single chart (visual) can have more than one tooltip

3. Different tooltip pages for the same chart can vary in size

This super tooltip is suitable for various chart scenarios. The implementation technique involves DAX + HTML + CSS + SVG, and the code principles are straightforward, making it easy to learn even for beginners. Below, adding tooltips to long text is used as an example, but the same principles apply to other types.

Here is an example of HTML measure, with the following effect:

When hovering over text A, a red circle appears. When hovering over text B, a blue rectangle appears. Place the measure in HTML Content visual to see the result.

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>"