So I've made a tooltip for my svg image, when you hover it. The only problem is that the hover only appear when the mouse is other the path, and not just the whole div as I want.
How can I make the tooltip appear when the mouse is over the div --> svg_dashboard_weather which contains this 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>CodePudding user response：
You can set title for the div instead of giving it in the 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>