单击以显示 CSS 工具提示答案

【问题标题】：Click to show CSS tooltip单击以显示 CSS 工具提示
【发布时间】：2014-05-02 08:26:37
【问题描述】：

我是使用 CSS 和 HTML 的新手，我一直在尝试使用 CSS 和 HTML 创建工具提示，到目前为止已经成功。但是现在想知道是否可能如何使此工具提示仅在单击时出现。并在再次点击时消失。下面是我使用的 HTML 代码。如果有人可以建议一些 CSS 让我能够创造出理想的结果，那将是非常棒的

HTML

class='工具提示'样式='颜色:#585858;文字修饰：无；'>桌面NG信息

提前致谢

【问题讨论】：

OP，请使用完整代码编辑您的问题
那么你必须点击什么才能出现？如果工具提示不存在，则无法单击它。我认为您必须为此使用javascript。
我认为这个链接可能会帮助你jsfiddle.net/GQE4k/1
.fadeToggle();因为你已经使用了 jQuery，所以会更聪明
阅读本文tympanus.net/codrops/2012/12/17/css-click-events

标签： html css button tooltip

【解决方案1】：

要切换工具提示，您可以使用复选框的 :checked 伪类。

.tooltip {
  position: relative;
  border-bottom: 1px dotted black;
}
.tooltip span {
  visibility: hidden;
  width: 10em;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 9;
  top: -1em;
  left:  100%;
  margin-left:1em;
  opacity: 0;
  transition: opacity 1s;
}
.tooltip span::after {
  content: "";
  position: absolute;
  top: 1.5em;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip input {
  display:none;
}
.tooltip input:checked+span {
  visibility: visible;
  opacity: 1;
}

&lt;p&gt;Hello &lt;label class="tooltip"&gt;world&lt;input type="checkbox"&gt;&lt;span&gt;and this is the tooltip text displayed on click.&lt;/span&gt;&lt;/label&gt;! I am greeting you.&lt;p&gt;

【讨论】：

【解决方案2】：

HTML 代码

<a href="#" title="Sample tooltip" class="tooltip">Link</a>

CSS 代码

.tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}

.tooltip:hover:after{
   background:#111;
   background:rgba(0,0,0,.8);
   border-radius:5px;
   bottom:18px;
   color:#fff;
   content:attr(title);
   display:block;
   left:50%;
   padding:5px 15px;
   position:absolute;
   white-space:nowrap;
   z-index:98
  }
.tooltip:hover:before{
    border:solid;
    border-color:#111 transparent;
    border-width:6px 6px 0 6px;
    bottom:12px;
    content:"";
    display:block;
    left:75%;
    position:absolute;
    z-index:99
   }

试试这个会正常工作，onlcik 事件在 css 中不支持。

【讨论】：

"onlcik 事件在 css 中不支持。" 我想你忘记了 :active 伪类 ;)
如果你想使用active:jsfiddle.net/Z7GM6/1你必须在那个超链接上按住鼠标键
@Bluedayz 我试过你的小提琴，但只有当你点击链接时工具提示才会出现，然后自动消失..如何解决这个问题？
我通过 jsfiddle.net/Z7GM6 尝试过，但标题也会在一秒钟后出现。我将属性切换为“tip”，内容切换为“attr(tip)”，有更好的选择吗？