在同一元素上顯示多個工具提示

Question

我嘗試在元素上放置工具提示，該元素基於同一頁面上的四個按鈕進行更改。

a.tooltip span {    
    z-index:15; 
    position: relative; 
    display:none; 
    padding:14px 20px; 
    margin-top:17.5%; 
    margin-left:18%; 
    width:300px; 
    height:80px; 
    line-height:16px; 
    border-radius:2px;   
    box-shadow: 0px 0px 6px 3px #666; 
    opacity: 0.8; 
} 

a.tooltip:hover span{ 
    display:inline; 
    position:absolute; 
    border:2px solid #666; 
    color:black; 
    background:white repeat-x 0 0; 
} 

這是我的工具提示。我工作得很好，但當我想要顯示另一個工具提示時，我無法隱藏它。

如何根據我點擊的按鈕禁用此工具提示並顯示另一個工具提示？當顯示Tooltip2時Tooltip1必須隱藏，反之亦然。

谷歌博士沒有幫助，我只限於B2英語。

圖片澄清：

Answer 1

您可以更改提示內容與

$(".tooltip-selector").tooltip("option", "content", "New Content"); 

並綁定給你的按鈕的點擊

Answer 2

enter code here 

$(document).ready(function(){ 
 
\t $('.btn1').click(function(){ 
 
\t \t $('.tooltip').addClass('btn1'); 
 
\t \t $('.tooltip').removeClass('btn2'); 
 
\t \t 
 
\t \t }); 
 
\t $('.btn2').click(function(){ 
 
\t \t $('.tooltip').addClass('btn2'); 
 
\t \t $('.tooltip').removeClass('btn1'); 
 
\t \t 
 
\t \t }); 
 

 
\t 
 
\t });

\t a.tooltip span {    
 
z-index:15; 
 
position: relative; 
 
display:none; 
 
padding:14px 20px; 
 
margin-top:17.5%; 
 
margin-left:18%; 
 
width:300px; 
 
height:80px; 
 
line-height:16px; 
 
border-radius:2px;   
 
box-shadow: 0px 0px 6px 3px #666; 
 
opacity: 0.8;} 
 

 
a.tooltip.btn1:hover span.btn1{ 
 
display:inline; 
 
position:absolute; 
 
border:2px solid #666; 
 
color:black; 
 
background:white repeat-x 0 0;} 
 

 
a.tooltip.btn2:hover span.btn2{ 
 
display:inline; 
 
position:absolute; 
 
border:2px solid #666; 
 
color:black; 
 
background:white repeat-x 0 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<a href="#" class="tooltip">1 
 
<span class="btn1">1</span> 
 
<span class="btn2">2</span> 
 
</a> 
 
<button class="btn1">1</button> 
 
<button class="btn2">2</button>