光标不再悬停后如何使工具提示保持可见答案

【问题标题】：How to make tooltip stay visible after cursor is no longer hovering it光标不再悬停后如何使工具提示保持可见
【发布时间】：2016-08-04 15:28:48
【问题描述】：

我有一个工具提示，我希望它在单击时永久可见，并在再次单击时消失。现在，当您将鼠标悬停在图像上和离开图像时，我编写的代码运行良好。

谁能帮忙让它在点击时保持可见，在再次点击时不可见。

这是我的代码：

CSS

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 285px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: -23px;
  right: 125%;

  opacity: 0;
  transition: opacity 1s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1; 
}

HTML

<div id = "help">
        <div class="tooltip">
        <img type = help src="help.png" alt = "Support">
            <p class="tooltiptext">
                <b>Support:  </b> <br />
            </p>
        </div>
    </div>

【问题讨论】：

除非您使用表单控件（例如单选按钮）作为切换来记住开/关状态（被认为有点 hacky），否则仅在 CSS 中无法做到这一点。您需要一点 JS 来将 .tooltiptext 设置为可见或隐藏。
是的，我在想我可能必须使用 JS 来做到这一点！我不太擅长 JS :\

标签： html css

【解决方案1】：

您需要一些可以内联的 javascript。下面的代码会在每次单击 .tooltip div 时切换一个属性。

HTML：

<div id = "help" >
    <div class="tooltip" onclick="event.currentTarget.setAttribute('data-active', event.currentTarget.getAttribute('data-active') != 'true')">
    <img type=help src="help.png"/>
        <p class="tooltiptext">
            <b>Support:  </b> <br />
        </p>
    </div>
</div>

然后更改您的 CSS 以使用“数据活动”属性而不是悬停伪类。这将使工具提示文本仅在 .tooltip div 具有属性时可见：data-active="true"

CSS

 .tooltip[data-active='true'] .tooltiptext {
      visibility: visible;
      opacity: 1; 
 }

这是一个有效的小提琴：https://jsfiddle.net/ofpnr514/

注意：在 HTML 中直接内联 javascript 通常不是您想要做更复杂的事情的方式。我在这里做内联只是为了最小化javascript。作为 onclick="..." 属性内联的 javascript，作为单独的 JS 函数会更好。

function toggleActive(event) {
    event.currentTarget.setAttribute('data-active', 
            event.currentTarget.getAttribute('data-active') != 'true')
}

然后从你的 HTML 中调用这个方法

onclick="toggleActive(event)"

【讨论】：

【解决方案2】：

您可以将转换属性添加到您的 CSS 并设置其延迟时间..

过渡属性：可见性； 过渡延迟：0.2s；

transition-property 命名transition会延迟的属性，这里是：visibility

transition-delay表示属性变化前多久，这里是0.2秒。

在您的上下文中，您可以尝试让它出现很长时间。否则不使用Java脚本是没有办法的。

【讨论】：

我真的没听懂..是不是，你要改变onclick的过渡属性？如果是，那么您可以.. bt 这样您无论如何都会使用 java 脚本。 java脚本有很多选项。 @El Dj

【解决方案3】：

使用一点 JS，您可以在元素悬停时设置数据属性，并在单击时将其删除。例如：

(function(){
  var allTooltips = document.querySelectorAll(".tooltip");
  for (i = 0; i < allTooltips.length; ++i) {//for each .tooltip
     var tt = allTooltips[i];
    tt.addEventListener("mouseover",function(){
      this.setAttribute("data-state","hover");
    });
    tt.addEventListener("click",function(){
      this.setAttribute("data-state","");
    });
  }    
})();

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border:1px solid red;
}
.tooltip:hover {
  border-color:green;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 285px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  /*top: -23px;
  right: 125%;*/
  opacity: 0;
  transition: opacity 1s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip[data-state='hover'] .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<div id="help">
  <div class="tooltip">
    <img src="help.png" alt="Support">
    <p class="tooltiptext">
      <b>Support:  </b> 
      <br />
    </p>
  </div>
</div>

【讨论】：