The html-hint from istarkov

html-hint's Introduction

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)

html-hint's People

Stargazers

Watchers

html-hint's Issues

tooltip does not work

I have something like this

return (
  <div className="hint hint--html hint--info hint--top" style={style}>
    <div>{this.props.users}</div>
    <div style={{width: 80}} className="hint__content">
      ?
    </div>
  </div>
);

and I don't get hover tooltip working for my app. Has anyone had similar issue or know how to fix this?

Thank you,

readme usage mistake

Hello, you have one mistake in usage section. Second div not closed.

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