Question

我有一个工具提示，我希望它在点击时永久可见，并在再次点击时消失。现在我写的代码在你上下悬停图像时工作正常。

任何人都可以帮助让它在点击时保持可见，再次点击时看不见。

这是我的代码：

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>

Answer 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以使用＆＃39;数据激活＆＃39;属性而不是悬停伪类。这将使工具提示仅在.tooltip div具有属性时可见：data-active =＆＃34; true＆＃34;

CSS

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

这是一个工作小提琴：https://jsfiddle.net/ofpnr514/

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

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

然后从HTML中调用此方法

onclick="toggleActive(event)"

Answer 2

您可以将过渡属性添加到CSS并设置其延迟时间..

<强>过渡属性：可见性; 的过渡延迟：0.2秒;

transition-property命名转换将被延迟的属性，这里是：visibility

过渡延迟表示房产改变前多久，这里是0.2秒。

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

Answer 3

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

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

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

3 个答案: