如何实现鼠标悬停在包含SVG的div#svg_dashboard_weather时显示tooltip

解决方案 #

当前触发范围受限是因为tooltip来自SVG <path> 内部的 <title> 标签，仅命中路径矢量区域才会触发。你已经引入了Bootstrap 4框架，直接给外层div绑定tooltip即可实现整区域触发，操作如下：

1. 修改外层div属性 #

给id为svg_dashboard_weather的div添加Bootstrap tooltip配置属性，同时删除SVG path内部的<title>4/5</title>标签避免冲突：

<div id="svg_dashboard_weather" class="d-flex" 
     data-toggle="tooltip" 
     data-placement="top" 
     title="4/5">
    <!-- 原有SVG代码，删除path内部的<title>标签 -->
</div>

2. 初始化Bootstrap tooltip #

Bootstrap 4的tooltip组件需要手动初始化，在页面末尾添加如下JS代码：

$(function () {
  $('#svg_dashboard_weather').tooltip()
})

3. 可选优化 #

给SVG添加宽高样式，让它完全撑满外层25*25px的div容器，避免布局错位：

#weather-partly-cloudy {
  width: 100%;
  height: 100%;
}

备选纯CSS实现（无需JS） #

如果不想依赖JS初始化，也可以用CSS伪元素实现相同效果：

1. 给外层div添加自定义属性：

<div id="svg_dashboard_weather" class="d-flex" data-tooltip="4/5">

2. 添加对应CSS样式：

#svg_dashboard_weather {
  position: relative;
  /* 保留原有width、height、float等样式 */
}
#svg_dashboard_weather:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 9999;
}

两种方案都可以实现鼠标悬停在整个div区域时触发tooltip显示的效果。

内容的提问来源于stack exchange，提问作者Mads Sander Høghstrup