Tooltip when mouseover on map

I'm trying to make a tooltip appear when hovering over a part of an image, but it's not working, I've tried two ways: The first one was to put title in the map of the image, it appears the tooltip, however I can not edit the text, like increase font and colors.

 <img src="imagens/modulos.png" alt="" usemap="#Map" />
        <map name="Map" id="Map">
            <area alt="" title="Texto teste" href="#" shape="rect" 
            coords="5,100,286,117" />

Theotherwayistousediv,thiswayIcanedit,butIcannotmakethetooltipappearintheimage,itappearsinthedivbelowtheimage!

<imgsrc="imagens/modulos.png" alt="" usemap="#Map" />
 <map name="Map" id="Map">
 <div class="wrapper">
    <area alt="" href="#" shape="rect" coords="6,211,337,230" />
    <div class="tooltip">sdagasdgasdgasdg</div>
 </div>

Cananyonegiveahelpinghandoradirectionhowtomakeitwork?Thankyouinadvance!

CSStooltip.wrapper.tooltip:before{bottom:-20px;content:" ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  
.wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1496bb 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}
.lte8 .wrapper .tooltip {
  display: none;
}

.lte8 .wrapper:hover .tooltip {
  display: block;
}