hh

html-hint

css hint (tooltip) based on hint.css with html content support

Showing:

Popularity

Downloads/wk

309

GitHub Stars

68

Maintenance

Last Commit

5yrs ago

Contributors

0

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Base, click to view

Install

npm install --save html-hint

Usage

<div class="hint--html hint--top">
  Place here any element
  <div class="hint__content">
    Place here your tooltip HTML content
  </div>
</div>

If you are prefer to use css-modules you can use composes

<div class={styles.myClass}>
  Place here any element
  <div class={styles.myTooltip}>
    Place here your tooltip HTML content
  </div>
</div>
@import 'html-hint'

.myClass
  composes: hint--html
  composes: hint--top
  composes: hint--info
  cursor: pointer

.myTooltip
  composes: hint__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
  @include hint-color(yellow)
  cursor: pointer

Placement options example

Base, click to view


By default tootips are not hoverable, adding hint--hoverable class makes them hoverable.

<div class="hint--html hint--top hint--hoverable">
  Place here any element
  <div class="hint__content">
    Place here your tooltip HTML content
  </div>
</div>

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

Always example, click to view

Contribute

npm install
npm run start
# open http://localhost:4000 and you will get hot reloadable env

License

MIT (http://www.opensource.org/licenses/mit-license.php)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100