Control display of HINT.css library tooltip with jQuery events

Question

I am using HINT.css and would like to have the tip hide when the div/class is clicked and turned on when the use mouses out of the div/class. I thought what I have here was pretty straight forward. I am surprised it didn't work, what am I missing?

<div class="promo">
   <div class="offer hint--top hint--info hint--rounded hint--info" 
    data-hint="PUT SOME COOL COPY, TO GET PEOPLE TO CLICK!!!"></div>
</div>

$(document).ready(function() {
   $( '.promo' ).on('click','.offer', function(){
   $(this).hide();
});
   $( '.promo' ).on('mouseleave','.offer', function(){
   $(this).show();
});
}); //end of document ready

which part isn't working? does it give you any javascript errors? check your console and post the results. — Derek, Apr 10 '13 at 19:42

score 2 · Accepted Answer · answered Apr 10 '13 at 20:49

The problem you have is created by the way in which the HINT.css library is working. The tooltips are pseudo-elements, so although the jQuery click event added will hide the element, it will immediately appear again due to the HINT.css code :hover class which is still applying to the element.

But we can workaround this and add in the functionality by adding a display:none rule to the pseudo-element as a class which is added or removed by jQuery.

For example:

JavaScript

$(function() {
  $('.promo').on('click','.offer', function() {
    $(this).addClass('fakeHide');
  });

  $('.promo').on('mouseleave','.offer', function(){
    $(this).removeClass('fakeHide');
  });
});

CSS

.fakeHide[data-hint]:before, .fakeHide[data-hint]:after {
  display:none;
}

HTML

<div class="promo"><span class="offer hint--bottom hint--rounded hint--info" data-hint="PUT SOME COOL COPY!!">I am a promotion - hover over me</span></div>

This was a difficult one to demo. For some reason both jsFiddle and jsBin do not show the tooltips in edit mode, however they do work in live preview mode.

See demo or edit demo - and remember it only appears in live preview mode!

Thanks so much! I am going to do some reading on pseudo-elements! — Antonio Pavicevac-Ortiz, Apr 10 '13 at 21:34
Happy to help. It was a good question :-) As for pseudo-elements, my advice is "don't go looking for them in the DOM" - see http://stackoverflow.com/a/5041526/637889 — andyb, Apr 10 '13 at 21:37

score 1 · Answer 2 · answered Apr 10 '13 at 19:51

1

As soon as you click on div it hide the div but same time it firing mouseleave on div where you again calling show. that why it never will be hidden.

JSFIDDLE

answered Apr 10 '13 at 19:51

Anoop

23,044
10
62
76

`+1` for explaining what the problem is – andyb Apr 10 '13 at 19:53
Thanks! The JSFIDDLE is blank, I appreciate your help though. – Antonio Pavicevac-Ortiz Apr 10 '13 at 19:55
@antonio Sorry, but I changed url, check again – Anoop Apr 10 '13 at 19:57
Great, thanks! So i commented out the alert, and fired some additional clicks and the tooltip continues to fire. Eventually clicking in the div/class will fire a slider, which is why I want the tooltip to stop. I figure the user has been alerted by the tooltip which is why I'd like it to cease. – Antonio Pavicevac-Ortiz Apr 10 '13 at 20:06

score 0 · Answer 3 · answered Apr 10 '13 at 19:45

0

The Code which you have mentioned above does exactly what you want..

[http://jsfiddle.net/MjFRe/][1]

[1]: JsFiddle Demo

answered Apr 10 '13 at 19:45

insomiac

5,648
8
45
73

This demo shows nothing and should really be a comment on the question. – andyb Apr 10 '13 at 19:53

Control display of HINT.css library tooltip with jQuery events

3 Answers3