模拟CSS悬停：之前和悬停：触摸屏的行为工具提示之后

Question

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

在非触摸屏上效果很好，但在触摸屏上，点击会显示提示，但它永远不会隐藏。我试图获得一个切换解决方案，保持我已完成的工作，并添加一个触摸屏jQuery或CSS解决方案来显示和隐藏工具提示。我希望点击显示/隐藏切换，但延迟（）的解决方案也可以。

我已阅读

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我也尝试过：之前和：选择器添加之后

    .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 () {