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

问题描述：

当用户将鼠标悬停在图像映射菜单上时，尝试重新定位文本，以使它们全部一致并出现在图像上方的中心位置。

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

谢谢我会试试 – harry

嗨Azs06没有工作 – harry

答

这是为了做到这一点，使用CSS单向。

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

.container{ 
 
\t position: relative; 
 
\t width: 260px; 
 
\t padding: 100px 20px 20px; 
 
\t background: #000; 
 
} 
 
.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box { 
 
color: #fff; \t 
 
border: 0; \t 
 
position: fixed; 
 
top: 5px; 
 
left: 120px; 
 
background: transparent; \t 
 
} 
 
.tooltipster-arrow{ 
 
\t 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" /> \t 
 
</head> \t 
 
<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> \t 
 
</div> \t \t 
 
<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，这正是我想要它完美的作品:) – harry

乐于助人:-) – azs06

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

相关推荐