JQuery 工具提示自定义悬停项以显示在图像地图上方

Question

请帮忙！

尝试在用户将鼠标悬停在图像映射菜单上时重新定位文本，以便它们都一致并显示在图像上方的中央。

我无法重新定位它们，因为当我添加 CSS 时它们的反应各不相同。

理想情况下，我希望无边框主题中的悬停框为黑色，这样当用户在菜单项之间悬停时，图像映射上方只有文本显示为白色。

提前致谢！

  $(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.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>

Answer 1

这是一种方法，使用 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.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>  
<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>

希望对您有所帮助。

JQuery 工具提示自定义悬停项以显示在图像地图上方

JQuery tooltip customise hover items to appear above imagemap

html

javascript

css

jquery

tooltipster