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>

來源

2017-04-03 harry

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

希望這有助於。

來源

2017-04-05 16:22:04 azs06

非常感謝你azs06，這正是我想要它完美的作品:) – harry

樂於助人:-) – azs06

JQuery工具提示自定義懸停項目以顯示在圖像上方

回答

相關問題