How to show and hide hint.css tooltips programmatically with JavaScript or jQuery?

[jgill333]

I am trying to find a way to show a hint.css after N milliseconds using JavaScript's setTimeout function. I may be missing something, but the steps described in this issue, https://github.com/chinchang/hint.css/issues/67, are not working for showing the hint tooltip (even without the timing related ask).

How would I show a tooltip for an element like the one below? This is not working.

$('.data-hint-class:before').show();
-- nor
$('.data-hint:before').show();
-- nor
$('.data-hint-fakeClass:before').show();

<a href="http://www.something.com" class="btn fancybox">
    <span class="fakeClass hint--left hint--rounded" data-hint="Something.">
Regular Button <em>for</em> Clicking!
    </span>
</a>

This seems like it would help other people wanted to do a similar task as well and any help would be greatly appreciated.

Thanks!

[radoslawhryciow]

I guess you could do something like:

$('.fakeClass').toggleClass('hint--always');      // toggle hint visibility
$('.fakeClass').addClass('hint--always');          // show hint
$('.fakeClass').removeClass('hint--always');    // hide hint

http://jsfiddle.net/Ka5ua/

[jgill333]

Thanks! Ended up using a version like this:

setTimeout(function(){
     $('.fakeClass').toggleClass('hint--always');
}, 300);