search

chinchang / hint.css

A CSS only tooltip library for your lovely websites.
https://kushagra.dev/lab/hint/
MIT License
8.42k stars 701 forks source link

New feature hint--timeout #76

Closed wikiro closed 10 years ago

wikiro commented 10 years ago

I want to show hint after 500 ms.

chinchang commented 10 years ago

If you want to do it the quick way, here is something you can append to your copy of hint.css file:

.hint--timeout:before, .hint--timeout:after {
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  transition-delay: 500ms;
}
wikiro commented 10 years ago

Thanks! What about hide hint in 1 sec and what about default properties whithout "--timeout"?

chinchang commented 10 years ago 
.hint--timeout:before, .hint--timeout:after {
  -webkit-transition-delay: 1000ms;
  -moz-transition-delay: 1000ms;
  transition-delay: 1000ms;
}
.hint--timeout:hover:before, .hint--timeout:hover:after {
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  transition-delay: 500ms;
}

Above code will make tooltip appear in 500ms and hide in 1000ms. This will apply to elements having hint--timeout class only. Rest other tooltips will function normally.

wikiro commented 10 years ago

Great! Thanks!

jamespsterling commented 8 years ago

Thanks, this is very useful!