chinchang / hint.css

A CSS only tooltip library for your lovely websites.

Hint.css

A tooltip library in CSS for your lovely websites

Demo • Get started • Who's using this? • Browser support • FAQs • Contributing • License

hint.css is written as a pure CSS resource using which you can create cool accessible tooltips for your web app. It does not rely on JavaScript but rather uses aria-label/data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. Also it uses BEM naming convention particularly for the modifiers.

Get Started

Get the library using one of the following ways:

1. GitHub

Full build

• [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.css
• [minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css

Base build (Does not include color themes and fancy effects)

• [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.base.css
• [minified] : https://raw.github.com/chinchang/hint.css/master/hint.base.min.css

2. Bower : bower install hint.css

3. npm: npm install --save hint.css

4. CDN: https://www.jsdelivr.com/package/npm/hint.css or https://cdnjs.com/libraries/hint.css

Now include the library in the HEAD tag of your page:

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

or

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

Now, all you need to do is give your element any position class and tooltip text using the aria-label attribute. Note, if you don't want to use aria-label attribute, you can also specify the tooltip text using the data-hint attribute, but its recommended to use aria-label in support of accessibility. Read more about aria-label.

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

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

• Colors - hint--error, hint--info, hint--warning, hint--success
• Sizes - hint--small, hint--medium, hint--large, hint--fit
• hint--always
• hint--rounded
• hint--no-animate
• hint--bounce
• hint--no-arrow
• hint--no-shadow

Upgrading from v1.x

If you are already using v1.x, you may need to tweak certain position classes because of the way tooltips are positioned in v2.

Changing the prefix for class names

Don't like BEM naming (hint--) or want to use your own prefix for the class names?

Simply update src/hint-variables.scss and change the $hintPrefix variable. To generate the css file, please read the contributing page.

Who's Using This?

• Webflow Playground
• Panda chrome app
• Fiverr
• Stackshare
• Siftery
• LessPass
• Tridiv
• Alm - TypeScript IDE
• Prototyp
• Tradus
• Web Maker
• Tolks
• Formspree
• codeMagic

Are you using hint.css in your awesome project too? Just tweet it out to @hint_css or let us know on the mailing list.

Browser Support

hint.css works on all latest browsers

FAQs

Checkout the FAQ Wiki for some common gotchas to be aware of while using hint.css.

Contributing

hint.css is developed in SASS and the source files can be found in the src/ directory.

If you would like to create more types of tooltips/ fix bugs/ enhance the library etc. you are more than welcome to submit your pull requests.

Read more on contributing.

Changelog & Updates

See the Changelog.

To catch all updates and discussion, join the mailing list: [email protected].

Or follow on twitter: @hint_css

License

Hint.css is free for personal and commercial use under the MIT License.

Credits

This doesn't make use of a lot of BEM methodology but big thanks to @csswizardry, @necolas for their awesome articles on BEM and to @joshnh through whose work I came to know about it :)

Sponsor

hint.css's Issues

Custom tooltip colours

My page uses a darkgrey background and these tooltips are barely visible. The page frame itself is black and white only, no colour is used outside the actual content. I'd like to use a lighter grey colour for the tooltips and black text on them. But the hint.css file is too complex to edit. What override CSS code do I need to add custom colours, or could this be added/prepared by the library?

HTML tags in data attribute

I'm not sure it's possible but it would be nice if HTML tags could be used inside the data-hint attribute. (mostly just for the odd line break)
According to the contributors on the page below, it should be possible?
http://stackoverflow.com/questions/4699276/can-data-attribute-contain-html-tags

Greetings,
Manuel

Tooltips truncated if positioned close to edge of screen

If a tooltip is set on an item near the edge of the screen (say the right edge), and hint--right is also set, the draws itself off the edge of the screen:

Ideally the tooltip would position itself on the opposite side, or adjust its width.

show tooltip on focus.

I have seen this: #27 and this: #19 and I thought when I have an control like textarea or an input field, I can click on it and it will appear and when I set the focus to an other element, the same but no it only works onhover the element. I nee a feature for the input element itself so I can click on it, the hint will appear and I click out and it should disappear. Is this possible?

Regards

Chris

Hint not work on Chromium 27/Google Chrome 27

The hint is not displayed on Chromium 27/Google Chrome 27.

opacity(?) bug

While appearing, hint has somewhat like opacity even though I turned it off and after animation finishes, it appear to work properly again.
I tried turning off all the transforms and transitions, played with opacity and visibility, but nothing helped. The interval between it's being half-transparent and non-transparent is like 0.5s or something.
It's a table, btw.

Rename grunt.js to Gruntfile.js

http://gruntjs.com/getting-started says:
"This file was named grunt.js for 0.3.x versions of Grunt."

However the current dependency is 0.4.0, thus the request for changing the name.

As a side note, while calling in Windows and in command prompt, issuing the command "grunt" opens the grunt.js in my default editor...

Set max width on tooltips

Hello. I'm wondering if there is a way to set a maximum width on tooltips. When a tooltip is very long, the text does not break onto lines, and the tooltip extends off the page.

Thanks!

hint.css causes a weird -webkit-scrollbar reaction

Whenever you activate a "hinted" element by hovering it, the webkit-scrollbar-track-piece turns black and then back to normal.
You can see a live example of what I mean here (all the link in the top nav bar use hint.css).

Edit: Note that it seems like the issue is related the css3 transition added in to the popup. By removing it, the issue disappears.

Have a custom Hint builder

Have something like jQuery builder which developers can use to get a customized version of Hint.css. May be an option to select desired modules also.

Helping hands are welcome :)

Multi-Line Tooltips

I'm looking for a way to add more than a single line (forced) to a tooltip.

Anyone have any ideas on how to do this? (html does NOT work!)

I've tried

<pre></pre>
<br />
\r\n

Also, I'm trying to execute basic html (links) within a tooltip; any ideas on how to accomplish this?

Add option for rounded corner tooltips

Probably a class called hint--rounded.

Suggested by @parisk in #10

HTML inside a hint? (Nesting tags in data-hint?)

Is it possible to have html inside a hint that will be rendered?

I am wanting to have an unordered list inside a hint but the tags are not rendered when the hint shows up. Is there any possibility of making this work?

Here is a screenshot of the list not being rendered:

This is for a custom bb code engine i have written, i want 'BB Code Tags' that are invalid to show the reason why they could not be rendered to assist the user in creating quality posts. The list of reasons is shown as a list inside of the hint tooltip.

Hints on buttons get stuck in open state after a click

Here is an example of what I mean: http://codepen.io/adonisk/pen/eKAIF
You can also see it at http://codemagic.gr , pressing the buttons on the topbar (HTML, CSS, JS, Console etc) will reproduce the issue.

tested it in Chrome v32, Firefox Nightly 28.0a1 and Epiphany (latest)

class="hint-top" instead of class="hint--top" ?

This is one improvment sugestion.
Why not write "hint-top" instead of "hint--top" ?

Is there a technical reason ?

bad link

hint.css :
Line 12 :

• Demo: http://kushagragour.in/labs/hint/

error no "S" in "lab

Could this be made to work with SVG embedded in the document?

hint.css does not work well with prettify.js on Firefox

I am using hint.css in combination with prettify http://code.google.com/p/google-code-prettify/

On Chrome/Safari the tooltips look normal, on Firefox, the combination with prettify.js yields strange results - the arrow is mangled or does not appear and the second/third letter of the tooltip are only semi-visible.

toy example code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="run_prettify.js"></script>
<link rel="stylesheet" href="hint.css"></link>
</head>
<body>
    <pre class="prettyprint" style="border:0px">
        <code class="language-xml">
 &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
 &lt;book&gt;
    &lt;page&gt;1&lt;/page&gt;<nocode><a style="max-width:50px;" class="hint--top hint--always" data-hint="Tooltip text."></a></nocode>
    &lt;page&gt;2&lt;/page&gt;
    &lt;page&gt;3&lt;/page&gt;<nocode><a style="max-width:50px;" class="hint--right hint--always" data-hint="Tooltip text."></a></nocode> 
&lt;/book&gt;
        </code>
    </pre>
</body>
</html>

Support Opera

Please do not ignore Opera browser.
Transitions has long supported the prefix "-o-transition".
Transforms has long supported the prefix "-o-transform".

show tooltip on focus also

Everything centered

I'd like to center the arrow in the tooltip. Anyone can make this work? I tried playing around with percentages but since the length of the text is dynamic I couldn't manage... Is this possible?
Centering the tooltip would also be nice.
Any ideas?

new line characters do not work

following issue #24

with 1.3.x version 
 and \u000A do not work, to have breaking line.
Help me please to have new line in hint working again !

Position error with -webkit-column-count

Hi,

I try to use hint.css on Chrome width the -webkit-column-count on the contenair.
All is good for the first column but for the others the tooltip don't find the real position of his parent. Sample here:

http://jsfiddle.net/OrelP/S5rUV/

Have you got an solution to fix it?

Thanks,

OrelP

Text appears unsettled during transforms

In Firefox, the text changes its appearance during the moving transform. At first it's normal, but when the target position has been reached, the text looks thin and has colour fringes. After a short moment, it reverts to a good rendering automatically. This is disturbing and looks strange. It does not happen in Chrome, other browsers untested. Windows 7. Also visible on your website, but not a strong as on mine.

Could I disable this transform by another CSS class or something? I don't think it is actually necessary, given that it doesn't work well.

Can't use SCSS code direclty

You mix Sass & Scss syntax in so many place...
Please replace + by @include.

Use tooltip as Pop Up Menu. Is this possible?

Hello,

Is it possible to have an unordered list (UL) inside the tooltip?

And have being able to move the mouse over the tooltip without making it disappear?

Basically, I would also like to use the tooltip as a popup menu.

Thank You,
Miguel

Maybe you want to use something from it

I'm using a modified Hint.css v1.3 for my own project.
Maybe you will be interested with this code :
Use Edit for the HTML version.

Three things:
1 )tip : tooltip in two colors
2) notif : side of the screen tip
3) notif-top : top of the screen tip

<title>Demo tip</title> <style type="text/css"> /* Tooltip - Très inspiré par : HINT.css - Source: https://github.com/chinchang/hint.css - Demo: http://kushagragour.in/labs/hint/ ------------*/ /* switching box model for all elements - Sources : KNACSS & css-tricks / Coyier - Needed for notif-top */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} [tip] ,[notif],[notif-top]{ position: relative; display: inline-block; } [tip]:before, [tip]:after , [notif]:before ,[notif-top]:before{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: none; } [tip]:before, [tip]:after { position: absolute; visibility: hidden; opacity: 0; filter: alpha(opacity=0); z-index: 1030; -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; transition: 0.2s ease; } [tip]:hover:before, [tip]:hover:after, [tip]:focus:before, [tip]:focus:after { visibility: visible; opacity: 0.9; filter: alpha(opacity=90); } [tip]:before { content: ''; position: absolute; background: transparent; border: 6px solid transparent; z-index: 1031; } [tip]:after { content: attr(tip); background: #383838; color: white; text-shadow: 0 -1px 0px black; padding: 0.55em 0.9em; font-size: 0.9em; white-space: nowrap; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); border-radius: 4px; } .tip-top:before {border-top-color: #383838;} .tip-bottom:before{ border-bottom-color: #383838;} .tip-left:before{border-left-color: #383838;} .tip-right:before {border-right-color: #383838;} /* Defines the positoning logic for the tooltips. */ /* top tooltip */ .tip-top:before{margin-bottom: -12px;} .tip-top:after{margin-left: -18px;} .tip-top:before, .tip-top:after { bottom: 100%; left: 50%; } .tip-top:hover:after, .tip-top:hover:before, .tip-top:focus:after, .tip-top:focus:before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px); } /* bottom tooltip */ .tip-bottom:before {margin-top: -12px;} .tip-bottom:after {margin-left: -18px;} .tip-bottom:before, .tip-bottom:after {top: 100%;left: 50%;} .tip-bottom:hover:after, .tip-bottom:hover:before, .tip-bottom:focus:after, .tip-bottom:focus:before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px); } /* right tooltip */ .tip-right:before { margin-left: -12px; margin-bottom: -6px; } .tip-right:after {margin-bottom: -14px;} .tip-right:before, .tip-right:after {left: 100%;bottom: 50%;} .tip-right:hover:after, .tip-right:hover:before, .tip-right:focus:after, .tip-right:focus:before { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px); } /* left tooltip */ .tip-left:before { margin-right: -12px; margin-bottom: -6px; } .tip-left:after {margin-bottom: -14px;} .tip-left:before, .tip-left:after { right: 100%; bottom: 50%; } .tip-left:hover:after, .tip-left:hover:before, .tip-left:focus:after, .tip-left:focus:before { -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px); } /* .tip-white pour une variante claire légèrement bleutée et un peu plus grosse */ .tip-white:after { background: #eee; color: #5a5a5a; text-shadow: none; box-shadow: 4px 4px 8px rgba(0, 0, 120, 0.3); padding: 0.3em 0.6em; font-size: 1.3em; opacity: 0.95; filter: alpha(opacity=95); border-radius: 6px;} .tip-top.tip-white:before {border-top-color: #e3e3e3;} .tip-bottom.tip-white:before{ border-bottom-color: #e3e3e3;} .tip-left.tip-white:before{border-left-color: #e3e3e3;} .tip-right.tip-white:before {border-right-color: #e3e3e3;} /* notif */ [notif]:before,[notif-top]:before { position: fixed; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 1040; pointer-events: none; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; transition: 0.4s ease; padding: 2.55em 2.9em; font-size: 1em; box-shadow: 3px 3px 6px rgba(40, 40, 40, 0.3); border-radius: 4px; } content: attr(notif); border-radius: 4px; left: 100%; bottom: 27%; width:303px; } [notif-top]:before { content: attr(notif-top); } [notif]:hover:before, [notif]:focus:before { text-align:left; -webkit-transform: translateX(-300px); -moz-transform: translateX(-300px); transform: translateX(-300px); } [notif-top]:before { left: 50%; margin-left: -300px; margin-top:-90px; top: 0%; width:600px; height:75px; text-align:center; } [notif-top]:hover:before , [notif_top]:focus:before { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); transform: translateY(100px); } /* Three different colors from Bootstrap for notifications : blue (info/default), green (success), red (error) */ [notif]:before , [notif-top]:before , [info]:before{ background: #d9edf7; color:#3a87ad; } [success]:before { color: #468847; background: #dff0d8; z-index: 1041; } color: #b94a48; background: #f2dede; z-index: 1042; } /* CSS for the demo */ #bloc { text-align:center; margin-top:10px;} .demo { border: 1px dashed #ccc; padding:35px; margin:0 auto; margin-bottom:25px; background: #f5f5f5; width:50%; max-width:700px; min-width:420px;} </style>

Tooltip & Notif

Tooltip basique

Hover me ! | Hover me ! | Hover me ! | Hover me !

Example : <span class="tip-top" tip='Hello Tip'>Hello Text</span>

Tooltip alternatif : .tip-white

Hover me ! | Hover me ! | Hover me ! | Hover me !

Example : <span class="tip-top tip-white" tip='Hello Tip'>Hello Text</span>

Notif

Hover me ! | Hover me ! | Hover me ! | Hover me !

Example : <span notif='Hello notif' success >Hello Text</span>

Notif alternatif : notif-top

Hover me ! | Hover me ! | Hover me ! | Hover me !

Example : <span notif='Hello notif' success >Hello Text</span>

Hints not shown on inputs and selects

I would like to display hint messages on invalid form fields, especially on inputs. However, hovering over a form element doesn't show the hint tooltip. This behaviour is cross-browser (IE10, Chrome 29, FF 24).

Wrapping an input in another element and adding data-hint attribute on the parent works for Chrome & FF, causes trouble in IE10 (sometimes it is shown, sometimes it isn't).

JsFiddle:
http://jsfiddle.net/maros_urbanec/8v4y7/

Formatting

I've never seen CSS formatted like this, it seems kind of obnoxious. Any specific reasons why it's formatted the way it is?

Activate with Javascript

I'm not sure if this is possible, but it'd be nice to show/hide the hover programatically with javascript. Something along the lines of

$(".data-hint-class').show()/.hide()

Focus issues on IE

Showing the tooltip on focus is causing problems in IE since, after clicking an element (such as a div), it seems to retain focus until one clicks elsewhere and therefore the tooltip does not disappear until that is done.

I'm thinking about what is the best way to solve this. Is the tooltip only being shown on focus because of input fields? If so, perhaps the best would be to add the :focus selector only to those fields. If this seems good, I can make a pull request.

Not blocked the script

На сайте http://motor-master.ru/nuke/modules.php?name=About_Firm
расширением noads почему то не блокируется внешний скрипт "code.jivosite.ru/script/widget/7281" и

с помощью ##$$jivosite не блокируется работа скрипта:

<script type="text/javascript">(function() {var widget_id = '7281';var s = document.createElement('script'); s.type = "text/javascript"; s.async = true; s.src = '//code.jivosite.ru/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss); })();</script>

---

Opera 12.14

Long hints are breaking layout.

I tried to prepare some code on CodePen:
http://codepen.io/anon/pen/hoDFb

Sorry for the mess in code.

You can hover over "2NT" on right table to display hint.
As you can see layout is broken, and hint is displayed far after declared content width.

Need a way to make tooltips invisible.

I have an appliaction where I have some disabled items at some points. There is no reason to show these tooltips since there is no action attached to the items they reference. Is it possible to attach a class to the tooltip to make it invisible?
eg;

into

Since "display: none" removes the entire container I am implementing a hack to alter your library's behavior. Ideally I would like to leave your implementation alone.

z-index usage bug

https://github.com/chinchang/hint.css/blob/master/src/hint-core.scss#L55

should be z-index: $zIndex + 1, if $z-index is set larger than 1000001 this element will be displayed incorrectly

You can't "deprecate" the hint class

class="hint--x" is still the only way to achieve tool tip placement.

It may not be required, but unless there is some other way to specify the location of the tool tip, calling it is deprecated is incorrect.

New feature hint--noanimation

Please, create this feature!

Is there a way to add new line in the hint?

The hint looks awesome. I can't seem to find a way or instruction to add new line on the hint. Is there a way to add new line in this version?

Thank you.

Supporting Ar

This tool is quit simple and effective at the same time , easy to use, BUT it doesn't support Arabic language 👎 maybe it's my problem in setting up the HTML document but I don't thing so ,, whole characters appear like boxes as if it trying to use a font that doesn't support Arabic language.

thanks for our efforts I 👍

Tooltips can interfere with each other if their 'parent' objects are in each others tooltip display area

Example

If you have two buttons, one on top of the other, and they both have tooltips, the button below will appear in front of the tooltip for the button above.

If you remove the tooltip from the button below, the tooltip above works fine as you'd expect.

Not sure what can be done here other than manually specifying z-indexes for each tooltip.

z-index as a variable

While 1000000 seems like a great number for tooltips, I think it'd be more appropriate in the variables. How about it?

Make the tooltips work in IE8

Issues in IE8:

• Always visible
• Wrongly positioned

Why should we use hint.css instead of Jquery UI tooltip ?

Adding data-hint removes bullets for <li> elements

For any li element, adding the data-hint attribute removes the element's bullet. For example, see this jsfiddle.

Issues with display in IE10

Hi,

Firstly what a great piece of CSS, thankyou for working on it!

Now to the problem I am having, For some reason I can get it to work nicely in Chrome and Firefox, however when I test in IE10 in the project I am working on, it only displays when I click on it. I created a JSFiddle to try eliminate anything that could be disrupting it. My JSFiddle located here: http://jsfiddle.net/ugf3F/9/ Does not appear to show anything on hover in IE10 (But still works in CH/FF). Am I missing something obvious or is it not doing what it should?

Help compiling with sass

I am trying to compile this on a freshly-cloned copy and I get an error:

$ sass src/hint.scss:hint.css
Syntax error: Invalid CSS after "...ow-border-color": expected "{", was "($defaultColor,..."
        on line 65 of /Users/jmvidal/hint.css/src/hint-position.scss
        from line 25 of src/hint.scss
  Use --trace for backtrace.

Sass does not seem to like those variable names. I am using the latest:

$ sass -version
Sass 3.2.5 (Media Mark)

I am new to sass so I am probably doing something wrong or missing some library. Help!

More variables

It would be cool if you could have a variables file where I could change things like font-size or text colors from my main.scss file. Just a thought. Thanks for the tooltips 👍

IE9|10, hovering over the hidden hint area makes the hint appear

I was testing my application to see how is the compatibility with IE and it seems like in IE10, the data-hint container element appears if you hover over it (while it supposed to be hidden).

npm install fails due to extra @ sign

While running "npm install", the fetching for the required node modules stops at "grunt-sass" since the "package.json" has

"grunt-sass": "[email protected]"

in devDependencies.
The @ sign seems to make the version unmatched, since there does exist 0.2.5.
Once removed, the command runs successfully.

hint on <tr> element breaks

I would like to display a hint when hovering on tr, on it's left, but it's breaking the table layout.