title: JQuery tooltip customise hover items to appear above imagemap
body: <p><a href="https://i.stack.imgur.com/Ag9IN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ag9IN.png" alt="this is how I would like the hover to work"></a>Help Please!</p>
  
  <p>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. </p>
  
  <p>I have been unable to reposition them as they individually react differently when I add the CSS. </p>
  
  <p>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.</p>
  
  <p>Thanks in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $(document).ready(function() {
    $('.tooltip').tooltipster({
    theme: ['tooltipster-noir', 'tooltipster-noir-customized']
    });
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  
     
  
       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;script src="http://code.jquery.com/jquery-1.10.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"&gt;&lt;/script&gt;
  &lt;link href="http://iamceege.github.io/tooltipster/dist/css/tooltipster.bundle.min.css" rel="stylesheet" /&gt;
  
  &lt;img src="https://i.stack.imgur.com/JRo8A.png" id="logo" style="width: 260px; max-width: 100%; height: auto;" alt="" usemap="#map" /&gt;
  
  &lt;map name="map"&gt;
  &lt;area shape="circle" coords="243,132,41" href="Konpakutotrack.html" class="tooltip" title="Track" /&gt;
  &lt;area shape="circle" coords="189,223,41" alt='' href="Konpakutoinsurance.html"  class="tooltip" title="Insurance Cov."/&gt;
  &lt;area shape="circle" coords="69,205,29" alt='' href='Konpakutohealth.html' class="tooltip" title="Health"/&gt;
  &lt;area shape="circle" coords="9,131,42" alt='' href='Konpakutounlocklock.html'  class="tooltip" title="Lock" /&gt;
  &lt;area shape="circle" coords="128,49,81" alt='' href='index.html' class="tooltip" title="Home" /&gt;
  &lt;/map&gt;
  
  
  &lt;/div&gt; 
    
         
   &lt;/body&gt;
  
    
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>