hint

Hint

This is gem-bundled version of Hint.css, ready to use with Rails or Compass.

Hint.css is a tooltip library written in SASS which uses only HTML/CSS to create simple tooltips. It does not rely on JavaScript and rather uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. Also it uses BEM naming convention particularly for the modifiers.

Installation

Add this line to your application's Gemfile:

gem 'hint'

Or install it yourself as:

$ gem install hint

Rails

Import hint in an SCSS file:

@import "hint";

or require it via Sprockets:

/*
 *= require hint
 */

Compass

Create new project:

$ compass create <project name> -r hint -u hint

or update an existing:

# In config.rb
require "hint"

Usage

Any element on your page which needs to have a tooltip has to be given at least one of the position classes: hint--top, hint--bottom, hint--left, hint--right to position the tooltip.

Hello Sir, <span class="hint--bottom">hover me.</span>

The tooltip text needs to be given using the data-hint attribute on that element.

Hello Sir, <span class="hint--bottom" data-hint="Thank you!">hover me.</span>

Use it with other available modifiers in various combinations. Available modifiers:

• hint--error
• hint--info
• hint--warning
• hint--success
• hint--always
• hint--rounded

Check out some examples at http://kushagragour.in/lab/hint/

Contributing

• Fork it
• Create your feature branch (git checkout -b my-new-feature)
• Commit your changes (git commit -am 'Add some feature')
• Push to the branch (git push origin my-new-feature)
• Create new Pull Request