JQuery Mapael showing ToolTip in wrong position

Question

I am making a interactive map using JQuery Mapaeal in an Angular 5 pr, and i'm in the process of adding tooltip to each region of the map but this is happening while i put my mouse over the region

In this image i have the mouse over the bottom left region(the mouse didn't appear in the print). And i want it to appear near the mouse like a normal tooltip.

This is my code:

html file:

<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 file:

    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"
                }
            }
        }
});
}

and this is my 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;
   }

is the Css file even being called? i'm not sure(not great at CSS yet) Thank you already.