HTML HINT
based on hint.css with html content support
The main disadvantage of hint.css is it's inability to show html content inside hint. This css library extends hint.css with html hints.
Example
Install
npm install --save html-hint
Usage
Place here any element Place here your tooltip HTML content
If you are prefer to use css-modules you can use composes
Place here any element Place here your tooltip HTML content
There are different placement options
hint--top-left
,hint--top
,hint--top-right
;hint--left
,hint--right
,hint--bottom-left
,hint--bottom
,hint--bottom-right
,
And different type options
hint--warning
,hint--error
,hint--info
,hint--success
(To change color you can also use mixin)
.myClass composes: hint--html composes: hint--top cursor: pointer
Placement options example
By default tootips are not hoverable, adding hint--hoverable
class makes them hoverable.
Place here any element Place here your tooltip HTML content
Hoverable example
Hoverable example, click to view
Sometimes you need to set hover by yourself.
Using hint--always
class you will make tooltip always visible,
using hint--hidden
you will prevent tooltip to show.
(both hint--always and hint--hidden will hide tooltip on hover)
hint--always example
Contribute
npm installnpm run start# open http://localhost:4000 and you will get hot reloadable env
License
MIT (http://www.opensource.org/licenses/mit-license.php)