Installation

To install, simply include one of simple-hint css files found in dist/ in your project:

<link href="css/simple-hint.css" rel="stylesheet" />

or

<link href="css/simple-hint.min.css" rel="stylesheet" />

To install via Bower, run bower install simple-hint .

Basic usage

To get started, use the simple-hint attribute for your text, and then specify the tooltip position by the appropriate class. The format for specifying position is position-alignment where position is where along the parent element you want to place your hint, and alignment is how you want to align it.

<span data-hint="your message goes here" class="hint-top-middle">Top-middle hint</span> Top-middle hint

<span data-hint="your message goes here" class="hint-bottom-right">Bottom-right hint</span> Bottom-right hint

Available positions are:

hint-top-middle

hint-top-left

hint-top-right

hint-bottom-middle

hint-bottom-left

hint-bottom-right

hint-left-middle

hint-left-top

hint-left-bottom

hint-right-middle

hint-right-top

hint-right-bottom

If there are any issues with tooltip positioning, try adding position: relative; to the element containing the hint.

Additional features

Most additional features can be appended to the existing hint class. This helps cut down on the number of classes added to the html tag.

Sizing

The sizing feature breaks long text into lines so you don't end up with a long string. To use sizing, append -s-your_size to the hint positioning class. Available options are -s-small , -s-med , -s-big

<span data-hint="lots of text..." class="hint-top-middle-s-small">Small sizing</span> Small sizing

<span data-hint="lots of text..." class="hint-top-middle-s-med">Medium sizing</span> Medium sizing

<span data-hint="lots of text..." class="hint-bottom-right-s-big">Big sizing</span> Big sizing

Color type

The color type feature allows you to change your tooltip background color. To specify the type, append -t-your_type to the hint positioning class. Available options are -t-info , -t-success , -t-error , -t-notice

<span data-hint="This tooltip type is 'info'" class="hint-top-middle-s-info">Info</span> <span data-hint="This tooltip type is 'success'" class="hint-top-middle-s-success">Success</span> <span data-hint="This tooltip type is 'error'" class="hint-top-middle-s-error">Error</span> <span data-hint="This tooltip type is 'notice'" class="hint-top-middle-s-notice">Notice</span> Info Success

Error Notice

Mobile disable

You can disable tooltips on mobile (< 768px) by appending -mobile to the hint position class. This is useful for touch devices to prevented unwanted tootips from popping up.

<span data-hint="This is hidden on mobile" class="hint-top-middle-mobile">Hidden on mobile</span> Hidden on mobile

Resize your window to < 768px and hover over the item above. You can customize the size at which the tooltip is hidden - see the customize section.

Tooltip persist

To persist tooltip visibility, add the .hint-persist class to the tag. NOTE: this feature requires it's own class - it's not appended to another class.

<span data-hint="Visible without hovering" class="hint-bottom-middle hint-persist">Persist</span> Persist

Fade in

To apply a fade-in transition, add the hint-fade class to the tag. NOTE: this feature requires it's own class - it's not appended to another class.

<span data-hint="The tooltip fades in" class="hint-bottom-middle hint-fade">Fade in</span> Fade in

Animation

To apply a move-in animation, add the hint-anim class to the tag. NOTE: this feature requires it's own class - it's not appended to another class.

<span data-hint="The tooltip is animated" class="hint-bottom-middle hint-anim">Animate</span> Animate

Delay

This feature adds a hover delay before displaying the hint. The available options are -d-short for a 0.4s delay, -d-med for a 1s delay, -d-long for a 1.5s delay. To add a delay, append the option to either the hint-fade or hint-anim class.

<span data-hint="This has a 0.4s delay" class="hint-right-middle hint-fade-d-short">Hover for 0.4s for hint</span> Hover for 0.4s for hint <span data-hint="This has a 1s delay" class="hint-bottom-middle hint-anim-d-med">Hover for 1s for hint</span> Hover for 1s for hint

To add a delay to a tooltip that doesn't have a transition/animation (no hint-fade or hint-anim), add the hint-d-your_delay class to the tag.

<span data-hint="This has a 1.5s delay" class="hint-top-middle hint-d-long">Hover for 1.5s for hint</span> Hover for 1.5s for hint

tl;dr

Feature Options Usage Position [top|bottom|left|right]-[middle|top|bottom|left|right] individual class Sizing -s-small , -s-med , -s-big append to .hint-POSITION class Color type -t-info , -t-success , -t-error , -t-notice append to .hint-POSITION class Mobile disable -mobile append to .hint-POSITION class Tooltip persist .hint-persist individual class Fade in .hint-fade individual class Animation .hint-anim individual class Delay -d-short , -d-med , -d-long - append to .hint-fade or .hint-anim class

- if using no transition/animation, add to separate .hint class (eg: span(class="hint-top-left hint-d-med") )

Examples

You can use multiple features simultaneously, just append the correct options:

Left positioned hint, error type, medium-sized, hidden on mobile, with a 1s delay on fade-in:

<span data-hint="Lorem ipsum..." class="hint-left-middle-t-error-s-med-mobile hint-anim-d-med">Hover for 1s</span> Hover for 1s

Simple hint is easy to incorporate in inline text:

Lorem ipsum Cupidatat in elit consectetur nisi quis dolore proident fugiat reprehenderit consectetur ut ullamco aliqua pariatur aute ullamco consectetur eu do ea id in magna proident aliqua voluptate reprehenderit mollit. Lorem ipsum Sint Ut dolore enim voluptate velit. Lorem ipsum Irure incididunt dolore eu.

As well as images if you wrap them in an element that allows pseudolements:

<div data-hint="Greg Jackson" class="hint-right-middle-t-info hint-anim"> <img src="img/user.jpg"> </div>

Lastly, you can use javascript to toggle hint visibility by adding/removing the hint-persist class.

Toggle me Toggle visibility

Customizing

Changing core styles

If you want more customizability to hint styling like changing the arrow size, tweaking colors, changing animation durations, etc, you can make changes directly to the scss file and rebuild the library.

To make changes, open the raw scss file in src/simple-hint.scss and change any of the scss variables at the top of the file. To rebuild the css file, run npm run build and you should see the updated file in dist/ .

Custom fonts

The font used on this page is Montserrat. You can set your own font by:

[data-hint]:after { font-family: 'font_name'; }

Depending on the font you use, you may have to experiment with the font-size and line-height to ensure that tooltip text isn't blurry during the fade-in feature.

Changing the mobile option

/* changed 768 to whatever value */ @media only screen and (max-width: 768px) { [class*="hint-"][class*="-mobile"]:after, [class*="hint-"][class*="-mobile"]:before { display: none; } }

Custom color types

To set your own color type:

[class*="hint-"][class*="-t-custom_type_name"] { /* set a custom name */ &[class*="hint-bottom"]:before{ border-bottom-color: custom_background_color; } &[class*="hint-top"]:before{ border-top-color: custom_background_color; } &[class*="hint-right"]:before{ border-right-color: custom_background_color; } &[class*="hint-left"]:before{ border-left-color: custom_background_color; } &:after { background: custom_background_color; color: custom_text_color; } }

and use it by:

<span data-hint="lorem ipsum..." class="hint-top-t-custom_type_name">My own type!</span>

Contributing

If you find any bugs, have feature requests, or would like to contribute - either send me a pull request or open a ticket and I'll do my best to follow up on it.

Developed and maintained by Catalin Covic under the MIT license.