如何使工具提示在單擊圖標時可見並在單擊相同圖標時隱藏？

Question

單擊信息圖標時，我想在三個不同的位置顯示工具提示。 並通過再次單擊圖標禁用工具提示。 如何通過使用 HTML 和 jQuery 來實現這一目標？ 在下面的示例中說，我單擊添加，它向我顯示了這 3 個工具提示，然后再次單擊添加隱藏它們。

編輯：我嘗試過的代碼

HTML

<div id="info-info">
   <i class="fa fa-info-circle" ></i>
    <div class="tip" data-toggle="tooltip" data-trigger="click">Info 1</div>
    <div class="tip1">Info 2</div>
    <div class="tip2">Info 3</div>
 </div>

JS

$(".info").click(function(){
 var left = $("i", this).offset().left + ($("i", this).width() / 2) - ($(".tip", this).width() / 2);
        $(".tip", this).toggle();
        $(".tip1", this).toggle()
        $(".tip2", this).toggle();
 });

CSS

#info-info {
  float: left;
  height: 50px;
  padding: 9px 0px 0px 10px;
  text-align: left;
  letter-spacing: 0;
  color: #FFFFFF;
  opacity: 1;
  text-decoration: none;
  font-size: 18px;
}

#info-info .tip {
  display: none;
  position: absolute;
  border: 1px solid #333;
  border-radius: 2px;
  padding-left: 3px;
  margin-left: 300px;
  left: 900px;
  color: #000000;
}

#info-info .tip1 {
  display: none;
  position: absolute;
  border: 1px solid #333;
  border-radius: 2px;
  padding-left: 3px;
  margin-left: 300px;
  left: 1px;
  color: #000000;
}

#info-info .tip2 {
  display: none;
  position: absolute;
  border: 1px solid #333;
  border-radius: 2px;
  padding-left: 3px;
  margin-left: 300px;
  left: 10px;
  color: #000000;
}

Answer 1

本質上，當單擊（或懸停）某些事物時，您將希望隱藏/顯示一組absolutely定位的元素

 function toggleTips () { $(".tooltip").each(function() { $(this).toggleClass("hidden") }) } $("#toggle-tips").on("click", function() { toggleTips(); })

 body { font-family: Sans-serif } table { border-collapse: collapse; } thead { background: lightgray; } table, th, td { border: 1px solid gray; } th, td { position: relative; padding: 10px }.tooltip { box-shadow: 3px 3px 10px 0 rgba(0,0,0,.5); padding: 10px; position: absolute; background: white; white-space: nowrap; font-weight: normal; z-index: 2; }.hidden { display: none; } button { margin-top: 10px; background: lightgray; padding: 10px; border: 0; border-radius: 10px; } button:hover { background: gray; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <th>First Name <span class="tooltip hidden">User's first name</span></th> <th>Last Name</th> <th>Phone #</th> </thead> <tbody> <td>Jane</td> <td>Doe</td> <td>0123456789<span class="tooltip hidden">User's phone number</span></td> </tbody> </table> <button id="toggle-tips">Toggle Tips</button>

Answer 2

想要這樣...

 $(function(){ $(".info").click(function(){ var left = $("img",this).offset().left + ($("img",this).width()/2) - ($(".tip", this).width()/2); $(".tip", this).toggle().css({"left":left}); }); });

 .info.tip{ display: none; position: absolute; border: 1px solid #333; border-radius: 2px; padding: 3px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="info"><img src="http://blog.flattr.net/wp-content/uploads/2011/09/stackoverflow.png" /> <div class="tip">tool tip text</div> </div>

來源 - http://jsfiddle.net/NPXaf/