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

【问题标题】：JQuery tooltip customise hover items to appear above imagemapJQuery 工具提示自定义悬停项目以显示在图像地图上方
【发布时间】：2017-04-03 21:20:02
【问题描述】：

请帮忙！

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

我无法重新定位它们，因为当我添加 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>

【问题讨论】：

将border: 0; 添加到您的.tooltipster-noir-customized css 应该可以实现您想要实现的目标。
谢谢，我试试看
嗨，Azs06 没用
也许我不明白你想要实现什么，你想要没有任何边框或背景的工具提示只是文本？这是一个没有边框的例子output.jsbin.com/sopojeh/1，也许这不是你想要的。
我希望没有边框，但主要是我希望所有悬停元素（例如轨道、健康、保险 cov）都出现在图像地图正上方的同一个位置。这样当用户将鼠标悬停在元素上时，直接固定到图像地图上方位置的 div 会根据用户悬停的内容而改变:) 希望这是有道理的 :)

标签： javascript jquery html css tooltipster

【解决方案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>

希望这会有所帮助。

【讨论】：

非常感谢 azs06，这正是我想要的，它可以完美运行 :)
乐于助人 :-)