Question

目前我有一张图片地图，允许用户悬停某个区域以查看他们导航到的页面。但是我希望文本始终显示在图像映射上方的相同位置，没有背景颜色。

这是我的代码

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

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box {
	background:black;
    

}



.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content {
	color: white;
    font-family: "josefin sans";
    font-size: 3rem;

    
   
	
}

      <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.stack.imgur.com/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>

定位jquery工具提示将鼠标悬停在图像映射上方

0 个答案: