CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
TheLearner
TheLearner

Reputation: 2863

Need to hide a tooltip after a few seconds from tap on mobile

Here's an anchor tag with a tooltip:

<a data-toggle="tooltip" data-original-title="Sorry, pronunciation audio not available!">
    <span class="glyphicon glyphicon-volume-off pronounce">
    </span>
</a>

On desktop screens, the tooltip only appears when the anchor is hovered over or clicked and vanishes when the mouse pointer moves away from it. However, on mobile screens, the tooltip does appear when the anchor is tapped but then stays on forever. Is there any way to make it fade out after a set period only on mobile devices?

UPDATE: For what it's worth, my tooltip JS looks like this:

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

Upvotes: 1

Views: 1112

Answers (1)

tejashsoni111
tejashsoni111

Reputation: 1405

This may help you : 

$('body').click(function(event){
    if (event.target.id != 'tooltip'){
        setTimeout(function(){
            $('#tooltip').tooltip('hide');
        }, 2000);
    }
});

JS FIDDLE : https://jsfiddle.net/b2t27sg0/3/

Upvotes: 1

Related Questions