如何解决使用 CSS 和 Javascript 显示和隐藏工具提示
当我将鼠标悬停在工具提示上时,我使用 CSS 来显示和隐藏工具提示。现在我需要它为具有点击功能的移动设备工作。我通过 Javascript 切换类得到了第一个工具提示。我现在如何为所有工具提示应用该功能?我有大约 30 到 40 个。知道如何实现我的目标吗?
document.getElementById("website-tooltip-container").addEventListener("click",function() {
var element = document.getElementById("test");
element.classList.toggle("website-tooltiptext-visible");
});
/* Tooltip Container */
.website-tooltip {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
color: #666;
}
/* Tooltip text */
.website-tooltip .website-tooltiptext {
visibility: hidden;
max-width: 350px;
font-family: open sans;
font-size: 13px;
line-height: 22px;
background-color: #FFFFFF;
color: #666;
text-align: left;
padding: 11px 15px 11px 15px !important;
border-radius: 3px;
box-shadow: 0px 5px 10px -2px rgba(0,0.5);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 100%;
margin: 0px 0px 0px 0px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.website-tooltip:hover .website-tooltiptext {
visibility: visible;
}
/* Hide when hovering over tooltip div */
div.website-tooltiptext:hover {
display: none;
}
/* Toggle this class to show Tooltip on click via Javascript */
.website-tooltiptext-visible {
visibility: visible !important;
display: block !important;
}
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
感谢您的帮助!
解决方法
使用额外的类。 将此添加到您的 css:
.website-tooltiptext-visible {
visibility: visible !important;
}
并在您的 js 代码中替换此类:
element.classList.toggle("website-tooltiptext-visible");
PS:切勿对多个 HTML 元素使用相同的 id。一如既往!
编辑:使用下面的javascript代码按类选择
Array.from(document.getElementsByClassName("website-tooltiptext")).forEach(
(element) => {
element.addEventListener("click",() => {
element.classList.toggle("website-tooltiptext-visible");
});
}
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。