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 the library using one of the following ways:
Full build
Base build (Does not include color themes and fancy effects)
Bower : bower install hint.css
npm: npm install --save hint.css
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:
hint--error
, hint--info
, hint--warning
, hint--success
hint--small
, hint--medium
, hint--large
hint--always
hint--rounded
hint--no-animate
hint--bounce
hint-no-arrow
If you are already using v1.x, you may need to tweak certain position classes because of the way tooltips are positioned in v2.
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.
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.
hint.css works on all latest browsers, though the transition effect is supported only on IE10+, Chrome 26+ and FF4+ at present.
Checkout the FAQ Wiki for some common gotchas to be aware of while using hint.css.
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.
See the Changelog.
To catch all updates and discussion, join the mailing list: hintcss@googlegroups.com.
Or follow on twitter: @hint_css
Hint.css is free for personal and commercial use under the MIT License.
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 :)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。