javascript - 模拟 CSS 悬停 :before and hover:after behavior tooltips for touchscreens

Question

我有一个非常好的纯 CSS 悬停工具提示解决方案，如下所示:

在非触摸屏上效果很好，但在触摸屏上点击一下就会显示提示，而且它永远不会隐藏。我正在尝试获得一个切换解决方案，它可以保留我完成的工作并添加一个触摸屏 jQuery 或 CSS 解决方案来显示和隐藏工具提示。我希望在点击时切换显示/隐藏，但使用 delay() 的解决方案也可以。

我读过

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

Access the css ":after" selector with jQuery

How to modify programmatically with javascript the css ::before and ::after

这是当前代码

今天添加的 JS 试图解决触摸屏问题:

$('.tooltip').click(function() {
    $(this).addClass('tooltipBefore tooltipAfter').delay( 800 ).removeClass('tooltipBefore tooltipAfter');
});

HTML

<a href="#" class="tooltip" title="Putts per round is the average number of putts per round played." >
    <span title="Info"><img src="/g/inputs/help.png"></span>
</a>

CSS - 今天修改以添加 .tooltipBefore .tooltipAfter 我还尝试添加了 :before 和 :after 选择器

    .tooltip{
        display: inline;
        position: relative;
        background:none;
        border:none;
    }

.tooltip:hover:after, .tooltipAfter:after {
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

.tooltip:hover:before, .tooltipBefore:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

编辑 2根据@maioman 对下面的回答修改了 JS。控制台日志我验证 $(this) 正在选择正确的元素，但在 Chrome 检查器中，该类闪烁但从未被 addClass 或 removeClass 修改。还尝试了 toggleClass 但未添加类。结束编辑 2

console.log($(this).attr("Title"));
$(this).addClass('tooltipBefore').addClass('tooltipAfter').delay( 3000 ).removeClass('tooltipBefore').removeClass('tooltipAfter');

编辑 3好的，编辑 #2 对我调用 addClass 和 removeClass 的方式有疑问。此版本可在浏览器中使用，但可以正确切换类，但仍无法在手机上使用:

$('.tooltip').bind( "click touchstart", function() {
    $(this).toggleClass('tooltipBefore tooltipAfter');
});

结束编辑 3

Answer 1

尝试改变这个

 $('.tooltip').click( function () {

到

 $('.tooltip').on('click touchstart', function () {