Power BI中实现图片网格或为Image Grid添加Tooltip功能求助

这是我当前的Dashboard，使用额外插件Image Grid展示图片，但该插件不支持Tooltip功能。请问如何不使用Image Grid实现此类图片网格，或是为其添加Tooltip功能？（数据源仅含一列图片URL）

提前感谢！

解决方案 #

方案一：不使用Image Grid实现带Tooltip的图片网格 #

通过自定义HTML+CSS结合平台的自定义组件能力即可实现，以常见的Dashboard平台（如Grafana）为例：

1. 编写HTML结构
   遍历图片URL列表，为每张图片添加原生Tooltip或自定义Tooltip容器：

   <div class="custom-image-grid">
     {{ range $url := .Data.Series[0].Values }}
       <div class="grid-item" title="{{ $url }}">
         <img src="{{ $url }}" alt="grid-image" />
       </div>
     {{ end }}
   </div>
   

   其中title属性会触发浏览器原生Tooltip，若需要更定制化的样式可参考后续步骤。

2. 添加网格布局CSS
   通过CSS实现自适应网格：

   .custom-image-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     gap: 12px;
     padding: 10px;
   }
   .grid-item img {
     width: 100%;
     height: 120px;
     object-fit: cover;
     border-radius: 4px;
     cursor: pointer;
   }
   

   可调整minmax值控制列宽，gap控制图片间距，object-fit保证图片比例。

3. 自定义Tooltip样式（可选）
   若原生Tooltip无法满足需求，用CSS伪元素实现自定义样式：

   .grid-item {
     position: relative;
   }
   .grid-item:hover::after {
     content: attr(title);
     position: absolute;
     bottom: 110%;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(30,30,30,0.9);
     color: #fff;
     padding: 6px 10px;
     border-radius: 4px;
     font-size: 12px;
     white-space: nowrap;
     pointer-events: none;
   }
   

方案二：为现有Image Grid插件添加Tooltip #

保留插件的前提下，通过注入自定义脚本实现Tooltip：

1. 定位图片元素选择器
   打开浏览器开发者工具，找到Image Grid生成的图片元素的CSS选择器，例如.image-grid-plugin .grid-img。

2. 注入JavaScript脚本
   在Dashboard的自定义脚本区域添加以下代码：

   document.addEventListener('DOMContentLoaded', function() {
     const gridImages = document.querySelectorAll('.image-grid-plugin .grid-img');
     gridImages.forEach(img => {
       // 原生Tooltip：直接设置title属性
       img.title = img.src;
   
       // 自定义Tooltip（可选，替换原生）
       img.addEventListener('mouseover', (e) => {
         const tooltip = document.createElement('div');
         tooltip.className = 'grid-tooltip';
         tooltip.textContent = img.src;
         tooltip.style.cssText = `
           position: absolute;
           left: ${e.pageX + 10}px;
           top: ${e.pageY + 10}px;
           background: #222;
           color: #fff;
           padding: 5px 8px;
           border-radius: 3px;
           font-size: 12px;
           z-index: 9999;
           pointer-events: none;
         `;
         document.body.appendChild(tooltip);
       });
   
       img.addEventListener('mouseout', () => {
         const tooltip = document.querySelector('.grid-tooltip');
         tooltip && tooltip.remove();
       });
     });
   });
   

   注意替换选择器为实际的图片元素选择器。

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