Question

我试图找出如何通过点击图标以及关闭它来打开工具提示。我一直在看这里的一些讨论，但它们似乎都没有在我的工作中发挥作用。以下是我到目前为止的情况：

HTML

<span class="info">
  <img alt="aImage" src="images/aImage.png" />
  <span style="display: none;" class="stuff">something something</span>
</span>

的Javascript

$(document).ready(function(){
  $(".info").tooltip({tooltipcontentclass:"stuff"})
});

对于这一点，当然，这只会显示工具提示，如果鼠标悬停在它上面并在你将鼠标悬停时将其关闭。我知道它并不多，但这是我能在这里做的最好的。如果有办法通过点击打开和关闭它，请告诉我。

Answer 1

我认为你甚至不需要插件。一点点CSS和jQuery就足够了：

$(function(){

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

  });

});

示例：http://jsfiddle.net/NPXaf/

单击图标可打开和关闭工具提示

1 个答案: