Show image in tooltip when mouse hover on interactive map (canada svg)

Question

im trying to show an image in tooltip when mouse hover in states

My code(index.cshtml

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <a target="_blank" id="state002" href="" title="">
        
            <path id="state002"
                  style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
                  d="m 547.96,1140.93 c 0,31.31 25.38,56.69 56.69,56.69 31.31,0 56.69,-25.38 56.69,-56.69 0,-31.31 -25.38,-56.7 -56.69,-56.7 -31.31,0 -56.69,25.39 -56.69,56.7 z" />
        
            </a>
        
               <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
        </script>
        
        <script type="text/javascript">
    jQuery(document).ready(function () {
    
            $("path").filter('[id="state002"]').css("fill", "#ffa500");
            $("a").filter('[id="state002"]').hover(
            function() {
        $("state002").tooltip({ content: '<img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png" />' }); 
    
            }
            );
    
    
            });    
        </script>

nothing happen when the mouse hover
Ps: am working with asp.net core , and i used this link : How to show an image in tooltip?

Answer 1

You missed to add the # before state002 in js:

$("#state002").tooltip({ content: '<img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png" />' }); 

And you should add jquery-ui.min.js too:

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

You can add shake like this:

<div id="toggle">
<a id="state002" href="" title="">move to me</a>
</div>

@section Scripts
{
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function () {        
                $(document).click(function () {
                    $("#toggle").effect("shake");
                });
                $("#state002").tooltip({ content: '<img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png" />' });     
    });
</script>
}