当鼠标悬停在交互式地图上时在工具提示中显示图像加拿大 svg

问题描述

当鼠标悬停在状态时，我试图在工具提示中显示图像

我的代码(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>

鼠标悬停时没有任何反应
Ps：我正在使用 asp.net core ，我使用了这个链接： How to show an image in tooltip?

解决方法

您错过了在 js 中的 state002 之前添加 # ：

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

你也应该添加 jquery-ui.min.js：

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

你可以像这样添加震动：

<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>
}