Question

请帮忙！

当用户将鼠标悬停在图像地图菜单上时，尝试重新定位文本，使它们全部一致并显示在图像上方居中。

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

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

提前致谢！

＆＃13;

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

＆＃13;

.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;

   

     }

＆＃13;

  <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>

＆＃13;

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工具提示自定义悬停项目以显示在imagemap上方

1 个答案: