Emulate CSS hover:before and hover:after behavior tooltips for touchscreens

Question

I have a very nice CSS-only hover tooltip solution like so:

screenshot

Works great on non-touchscreens but on touchscreens a click shows the tip and it never hides. I am trying to get a toggling solution which keeps the work I have done and adds a touchscreen jQuery or CSS solution to show and hide the tooltips. I'd like to have the show/hide toggle on click but a solution with delay() would also do.

I have read

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

Here is the current code

JS added today to try to resolve for touchscreens:

$('.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 - modified today to add .tooltipBefore .tooltipAfter which I also tried with :before and :after selectors added

    .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;
}

EDIT 2 Revised JS per @maioman answer to below. Console log i verifying that the correct element is being selected by $(this) but in Chrome inspector the class flashes but is never modified by addClass or removeClass. Also tried toggleClass but class is not added. END EDIT 2

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

EDIT 3 OK, so edit #2 has issues with how I call the addClass and removeClass. This version works in browser but and toggles class correctly but still does not work on phone:

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

END EDIT 3

so the option with delay is not working? – maioman May 17 '15 at 22:20 — maioman, May 17 '15 at 22:20

score 1 · Answer 1 · answered May 17 '15 at 22:22

1

try changing this

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

to

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

answered May 17 '15 at 22:22

maioman

18,154
4
36
42

Thank you for the reply. Am getting `Uncaught TypeError: $(...).on is not a function`. Did that function change to delegate() or something it seems like... – jerrygarciuh May 17 '15 at 22:32
Ah- on() replaced bind() and delegate() – jerrygarciuh May 17 '15 at 22:33
Using `$('.tooltip').bind( "click touchstart", function() {` gets same result as before- tooltip shows but never hides. – jerrygarciuh May 17 '15 at 22:35
take a look at this http://stackoverflow.com/questions/13219017/ghostclicks-in-mobile-apps – maioman May 17 '15 at 22:43
Thanks will look. Added edit above. addClass and toggleClass are failing to modify the element when veiwed in Chrome inspector on desktop – jerrygarciuh May 17 '15 at 22:45

Emulate CSS hover:before and hover:after behavior tooltips for touchscreens

1 Answers1