Simple Hint

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>

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

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>

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

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

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>

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>

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>

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>

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>

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>

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

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>

tl;dr

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>

Simple hint is easy to incorporate in inline text:

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.

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.