在同一元素上显示多个工具提示

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，反之亦然。

博士。谷歌没有帮助。

要澄清的图片：

Answer 1

您可以使用

更改工具提示内容

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

并将其绑定到按钮的

Answer 2

enter code here

＆＃13;

＆＃13;

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

	
	});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;