Question

我正在Angular 5 pr中使用JQuery Mapaeal制作交互式地图，并且我正在向地图的每个区域添加工具提示，但这是在我将鼠标放在区域{{3}上时发生的}

在此图像中，我将鼠标悬停在左下方区域（鼠标未出现在打印物中）。而且我希望它像普通工具提示一样出现在鼠标附近。

这是我的代码：

html文件：

<div class="container" id="background"  style="display: table;">
<div class ="mapcontainer" style="display: table-row">
    <div class="map" style="display: table-cell;">Alternative content</div>

    <div class="areaLegend" style="display: table-cell; float: left;">
        <span>Alternative content for the legend</span>
    </div>
</div>

Ts文件：

    initMap(){
    $(".mapcontainer").mapael({
        map: {
            name: "portugal",
            defaultArea: {
                attrs : {
                    stroke : "#fff", 
                    "stroke-width" : 1
                },
                attrsHover : {
                    "stroke-width" : 2
                }
            }
        },
        legend: {
            area: {
                title: TITLE,
                slices: [
                    {
                        max: 1,
                        attrs: {
                            fill: "#01c602"
                        },
                        label: LABEL1,
                    },
                    {
                        min: 2,
                        max: 2,
                        attrs: {
                            fill: "#d5dd2b"
                        },
                        label: LABEL2,
                    },
                    {
                        min: 3,
                        max: 3,
                        attrs: {
                            fill: "#FFA500"
                        },
                        label: LABEL3,
                    },
                    {
                        min: 4,
                        attrs: {
                            fill: "#FF0000"
                        },
                        label: LABEL4,
                    }
                ]
            }
        },
        areas: {
            "PT-01": {
                value: this.PT01,
                href: "#",
                tooltip: {

                     content : "<span style=\"font-weight:bold;\">Nord (59)</span><br />Population : 2617939"
                }
            }
        }
});
}

这是我的CSS：

 .mapTooltip {
    position : fixed;
    background-color : #fff;
    moz-opacity:0.70;
    opacity: 0.70;
    filter:alpha(opacity=70);
    border-radius:10px;
    padding : 10px;
   z-index: 1000;
   max-width: 200px;
   display:none;
   color:#343434;}

   .container {
      max-width: 800px;
      margin:auto; }

   body {
      font-family:Helvetica,Arial,sans-serif;
   }

Css文件甚至被调用了吗？我不确定（尚不擅长CSS）已经谢谢你了。

jQuery Mapael在错误的位置显示工具提示

0 个答案: