JQuery tooltip customise hover items to appear above imagemap

Help Please!

Trying to reposition the text when the user is hovering over the image map menu so that they are all be unanimous and appear centred above the image.

I have been unable to reposition them as they individually react differently when I add the CSS.

Ideally I would like to have the hover box in the borderless theme in black so only the text appears in white above the image map when the users hovers between menu items.

Thanks in advance!

  $(document).ready(function() {
  $('.tooltip').tooltipster({
  theme: ['tooltipster-noir', 'tooltipster-noir-customized']
  });
 });

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized   .tooltipster-box {
background:black;
Border:0;

 }



.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content {
    color: white;
   font-family: "josefin sans";
   font-size: 3rem;
Border:0;

   

     }

  <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"></script>
<link href="http://iamceege.github.io/tooltipster/dist/css/tooltipster.bundle.min.css" rel="stylesheet" />

<img src="https://i.sstatic.net/JRo8A.png" id="logo" style="width: 260px; max-width: 100%; height: auto;" alt="" usemap="#map" />

<map name="map">
<area shape="circle" coords="243,132,41" href="Konpakutotrack.html" class="tooltip" title="Track" />
<area shape="circle" coords="189,223,41" alt='' href="Konpakutoinsurance.html"  class="tooltip" title="Insurance Cov."/>
<area shape="circle" coords="69,205,29" alt='' href='Konpakutohealth.html' class="tooltip" title="Health"/>
<area shape="circle" coords="9,131,42" alt='' href='Konpakutounlocklock.html'  class="tooltip" title="Lock" />
<area shape="circle" coords="128,49,81" alt='' href='index.html' class="tooltip" title="Home" />
</map>


</div> 
  
       
 </body>

  
</html>

Solution

This is a one way to do it, using CSS.

$(document).ready(function() {
  $('.tooltip').tooltipster({
  theme: ['tooltipster-noir', 'tooltipster-noir-customized']
  });
 });

.container{
	position: relative;
	width: 260px;
	padding: 100px 20px 20px;
	background: #000;
}
.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized   .tooltipster-box {
color: #fff;	
border: 0;	
position: fixed;
top: 5px;
left: 120px;
background: transparent;	
 }
.tooltipster-arrow{
	display: none;
}


.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content {
    color: white;
   font-family: "josefin sans";
   font-size: 24px;

     }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link href="https://iamceege.github.io/tooltipster/dist/css/tooltipster.bundle.min.css" rel="stylesheet" />	
</head>	
<body>
<div class="container">
<img src="https://i.sstatic.net/JRo8A.png" id="logo" style="width: 260px; max-width: 100%; height: auto;" alt="" usemap="#map" />
<map name="map">
<area shape="circle" coords="243,132,41" href="Konpakutotrack.html" class="tooltip" title="Track" />
<area shape="circle" coords="189,223,41" alt='' href="Konpakutoinsurance.html"  class="tooltip" title="Insurance Cov."/>
<area shape="circle" coords="69,205,29" alt='' href='Konpakutohealth.html' class="tooltip" title="Health"/>
<area shape="circle" coords="9,131,42" alt='' href='Konpakutounlocklock.html'  class="tooltip" title="Lock" />
<area shape="circle" coords="128,49,81" alt='' href='index.html' class="tooltip" title="Home" />
</map>	
</div>		
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<script src="https://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"></script>
</body>
</html>

Hope this helps.