html - 整个 svg 的工具提示
问题描述
因此tooltip，当您将其悬停时，我为我的 svg 图像制作了一个。唯一的问题是，只有当鼠标不在路径上时才会出现悬停，而不仅仅是div我想要的整体。
tooltip当鼠标悬停在div --> svg_dashboard_weather包含此内容的内容上时，如何使显示内容出现svg？
#svg_dashboard_weather {
position: relative;
width: 25px;
height: 25px;
float: right;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<li id="111" class="list-group-item list-group-item-success">
<div class="overflow-hidden">
<div id="svg_dashboard_weather" class="d-flex">
<svg xmlns="http://www.w3.org/2000/svg" id="weather-partly-cloudy">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(1.000000, 0.000000)" fill="#0b6aa2" fill-rule="nonzero">
<path d="M13.4171429,5.10857143 C16.1142857,6.28571429 17.5428571,9.17714286 17.0514286,11.9542857 C18.5598507,13.2564185 19.4274629,15.1501489 19.4285714,17.1428571 L19.4285714,17.3371429 C19.7957344,17.2079806 20.1822099,17.1422797 20.5714286,17.1428571 C22.4649763,17.1428571 24,18.6778809 24,20.5714286 C24,22.4649763 22.4649763,24 20.5714286,24 L5.71428571,24 C3.18955543,24 1.14285714,21.9533017 1.14285714,19.4285714 C1.14285714,16.9038411 3.18955543,14.8571429 5.71428571,14.8571429 L6.02285714,14.8571429 C4.57142857,13.0857143 4.11428571,10.56 5.14285714,8.29714286 C6.54892003,5.13353033 10.251702,3.70662956 13.4171429,5.10857143 M12.4914286,7.2 C10.4685714,6.28571429 8.10285714,7.21142857 7.21142857,9.22285714 C6.70888506,10.3439587 6.75104659,11.6341014 7.32571429,12.72 C8.62869913,11.1733266 10.5490647,10.2821765 12.5714286,10.2857143 C13.349866,10.2845595 14.122817,10.4159611 14.8571429,10.6742857 C14.7880425,9.16233187 13.8728899,7.81833965 12.4914286,7.2 M14.3428571,3.01714286 C13.7142857,2.74285714 13.0857143,2.54857143 12.4342857,2.42285714 L15.28,0.937142857 L16.3085714,4.24 C15.7102781,3.74726829 15.0492768,3.336064 14.3428571,3.01714286 M5.81714286,3.93142857 C5.25714286,4.33142857 4.76571429,4.78857143 4.34285714,5.29142857 L4.46857143,2.08 L7.85142857,2.85714286 C7.14285714,3.09714286 6.45714286,3.46285714 5.81714286,3.93142857 M19.4285714,9.95428571 C19.331934,9.2900021 19.1750979,8.63588081 18.96,8 L21.68,9.71428571 L19.3371429,12.2628571 C19.4628571,11.52 19.4857143,10.7428571 19.4285714,9.95428571 M2.33142857,11.7714286 C2.41142857,12.4571429 2.56,13.1085714 2.77714286,13.7142857 L0.0685714286,12 L2.4,9.46285714 C2.28571429,10.2057143 2.25142857,10.9828571 2.33142857,11.7714286 M20.5714286,19.4285714 L17.1428571,19.4285714 L17.1428571,17.1428571 C17.1428571,14.6181269 15.0961589,12.5714286 12.5714286,12.5714286 C10.0466983,12.5714286 8,14.6181269 8,17.1428571 L5.71428571,17.1428571 C4.45192057,17.1428571 3.42857143,18.1662063 3.42857143,19.4285714 C3.42857143,20.6909366 4.45192057,21.7142857 5.71428571,21.7142857 L20.5714286,21.7142857 C21.2026111,21.7142857 21.7142857,21.2026111 21.7142857,20.5714286 C21.7142857,19.940246 21.2026111,19.4285714 20.5714286,19.4285714 Z" id="Shape">
<title>4/5</title>
</path>
</g>
</g>
</svg>
</div>
<span>1719 - SystemTemperature</span>
</div>
</li>解决方案
您可以title为 div 设置而不是在 svg 中提供它。
#svg_dashboard_weather {
position: relative;
width: 25px;
height: 25px;
float: right;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<li id="111" class="list-group-item list-group-item-success">
<div class="overflow-hidden">
<div id="svg_dashboard_weather" class="d-flex" title="4/5">
<svg xmlns="http://www.w3.org/2000/svg" id="weather-partly-cloudy">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(1.000000, 0.000000)" fill="#0b6aa2" fill-rule="nonzero">
<path d="M13.4171429,5.10857143 C16.1142857,6.28571429 17.5428571,9.17714286 17.0514286,11.9542857 C18.5598507,13.2564185 19.4274629,15.1501489 19.4285714,17.1428571 L19.4285714,17.3371429 C19.7957344,17.2079806 20.1822099,17.1422797 20.5714286,17.1428571 C22.4649763,17.1428571 24,18.6778809 24,20.5714286 C24,22.4649763 22.4649763,24 20.5714286,24 L5.71428571,24 C3.18955543,24 1.14285714,21.9533017 1.14285714,19.4285714 C1.14285714,16.9038411 3.18955543,14.8571429 5.71428571,14.8571429 L6.02285714,14.8571429 C4.57142857,13.0857143 4.11428571,10.56 5.14285714,8.29714286 C6.54892003,5.13353033 10.251702,3.70662956 13.4171429,5.10857143 M12.4914286,7.2 C10.4685714,6.28571429 8.10285714,7.21142857 7.21142857,9.22285714 C6.70888506,10.3439587 6.75104659,11.6341014 7.32571429,12.72 C8.62869913,11.1733266 10.5490647,10.2821765 12.5714286,10.2857143 C13.349866,10.2845595 14.122817,10.4159611 14.8571429,10.6742857 C14.7880425,9.16233187 13.8728899,7.81833965 12.4914286,7.2 M14.3428571,3.01714286 C13.7142857,2.74285714 13.0857143,2.54857143 12.4342857,2.42285714 L15.28,0.937142857 L16.3085714,4.24 C15.7102781,3.74726829 15.0492768,3.336064 14.3428571,3.01714286 M5.81714286,3.93142857 C5.25714286,4.33142857 4.76571429,4.78857143 4.34285714,5.29142857 L4.46857143,2.08 L7.85142857,2.85714286 C7.14285714,3.09714286 6.45714286,3.46285714 5.81714286,3.93142857 M19.4285714,9.95428571 C19.331934,9.2900021 19.1750979,8.63588081 18.96,8 L21.68,9.71428571 L19.3371429,12.2628571 C19.4628571,11.52 19.4857143,10.7428571 19.4285714,9.95428571 M2.33142857,11.7714286 C2.41142857,12.4571429 2.56,13.1085714 2.77714286,13.7142857 L0.0685714286,12 L2.4,9.46285714 C2.28571429,10.2057143 2.25142857,10.9828571 2.33142857,11.7714286 M20.5714286,19.4285714 L17.1428571,19.4285714 L17.1428571,17.1428571 C17.1428571,14.6181269 15.0961589,12.5714286 12.5714286,12.5714286 C10.0466983,12.5714286 8,14.6181269 8,17.1428571 L5.71428571,17.1428571 C4.45192057,17.1428571 3.42857143,18.1662063 3.42857143,19.4285714 C3.42857143,20.6909366 4.45192057,21.7142857 5.71428571,21.7142857 L20.5714286,21.7142857 C21.2026111,21.7142857 21.7142857,21.2026111 21.7142857,20.5714286 C21.7142857,19.940246 21.2026111,19.4285714 20.5714286,19.4285714 Z" id="Shape">
<title>4/5</title>
</path>
</g>
</g>
</svg>
</div>
<span>1719 - SystemTemperature</span>
</div>
</li>推荐阅读
- angular - 项目生成后在 Angular 中更改脚手架文件名
- node.js - 专用服务器说无法访问此站点 - NodeJs
- c# - 将添加的电子邮件订阅状态设置为“未订阅”
- c++ - OpenMP 改进 SpeedUp Block 分解
- java - ArrayList String 到 int 排序顺序
- amazon-web-services - Lambda 函数更新、发布、版本控制问题
- javascript - 排在一起时受表格影响的 HTML 画布高度
- pandas - 多索引 pandas 更新
- javascript - 如何在 react-native-collapsible 手风琴组件中使用`this`？
- c++ - MinGW 不构建和执行 C++