Search

Posts Tagged ‘Tooltip’

Creating Animated Tooltip Easily with Hint.css

Tooltip is a great way to display extra information on a website without taking extra space. The tooltip generally appears upon mouse hover, and there are probably of hundreds of jQuery plugins to include fancy tooltips on your website.

However, some common downsides of using jQuery plugin is that it comes with a set of useless options, and bloated with codes that slow down website performance.

So, today, we are going to take a look at an alternative of creating tooltip. With a bunch of new features in CSS3, it is now possible to create a comparable fancy tooltip only using CSS. Let’s get started.

Using Hint.css

In this post, we are not going to build it from scratch. We will be using Hint.css. Hint.css is a collection of classes and style rules, allowing us to create a simple tooltip more quickly. To use, simply add the stylesheet to your HTML document, or copy all the style rules to your own stylesheet.

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

Now, in your document text, wrap the piece you want to insert a tooltip with an inline element, like using a span or anchor element. And add the tooltip content with the data-hint attribute, like so.

 However, because the freelance <span data-hint="The arena of commercial dealings">marketplaces</span> across the globe are filled with freelance contractors all tendering for a limited amount of jobs. 

Technically, this is all you required. If you preview your document in the browser and roll over your mouse, you should see the tooltip pop up.

This tooltip is displayed with pseudo-element, and using CSS3 Transition for the animated move.

Give it a clue

Unless you are using an anchor element that comes with distinctive styles by default, there is no indication showing that the particular word will show a tooltip like what you see in the screenshot above, and thus, users, will most likely be clueless.

So, for the sake of better user experience, we can add some extra styles to give it an indicator, for example:

 span[data-hint] { border-bottom: 1px dotted #aaa; } span[data-hint]:hover { cursor: pointer; } 

These styles will give the span element with data-hint attribute a dotted border bottom. You can adjust the styles to meet your design requirement.

Tooltip Direction

We can show the tooltip in four different directions: top, bottom, right, and left using the provided classes.

Left

 <span class="hint--left" data-hint="The arena of commercial dealings">marketplaces</span> 

Right

 <span class="hint--right" data-hint="The arena of commercial dealings">marketplaces</span> 

Top

 <span class="hint--top" data-hint="The arena of commercial dealings">marketplaces</span> 

Bottom

 <span class="hint--bottom" data-hint="The arena of commercial dealings">marketplaces</span> 

Or keep showing the Tooltip

 <span class="hint--always" data-hint="The arena of commercial dealings">marketplaces</span> 

Final Thought

With more advanced properties in CSS3, today, we are no longer solely rely on JavaScript or jQuery to create a fancy UI, like creating a Tooltip, and using Hint.css, we can create one in snap. But as stated early in this post, this technique only allows us for creating a simple text-based tooltip.

If you want to create a more advanced tooltip, say, a tooltip with image or showing the tooltip upon mouse click rather than on mouse hover, using JavaScript or jQuery is still the better way to go.


    







Web Tooltip Design Showcase

Tooltips are a useful way to present additional, context-sensitive information about an element on a web page, such as a hyperlink. As tooltips continue to become more common as a means for users to interact with web page elements, the need for good tooltip design has become more important.

This collection of 40+ tooltip designs showcases the different approaches that web designers are taking for tooltip design and highlights the range of options available for styling this popular UI element.

View the tooltip design gallery.

Further Reading

25 Useful jQuery Tooltip Scripts

Tooltips can be a helpful way to provide information to visitors without creating clutter in a design. If you would like to add an attractive tooltip to your website it doesn’t have to be difficult. There are plenty of quality scripts available for use that will allow you to set up tooltips without coding it from scratch. In this post we’ll present 25 different jQuery tooltip scripts.

You may also be interested in:

Easiest Tooltip and Image Preview Using jQuery

Easiest Tooltip and Image Preview Using jQuery

jQuery Plugin: Tooltip

jQuery Plugin: Tooltip

Coda Popup Bubbles

Coda Popup Bubbles

Better Tip

Better Tip

jQuery Hover Sub Tag Cloud

jQuery Hover Sub Tag Cloud

Cut & Paste Ajax Tooltip

Cut & Paste Ajax Tooltip

BeautyTips

BeautyTips

Build a Better Tooltip with jQuery Awesomeness

Build a Better Tooltip with jQuery Awesomeness

TipTip

TipTip

Speech Bubble Tooltip Using CSS3 and jQuery

Speech Bubble Tooltip Using CSS3 and jQuery

jQuery Tooltip Plugin

jQuery Tooltip Plugin

jQuery Tooltip

jQuery Tooltip

SimpleTip

SimpleTip

jQuery Ajax Tooltip

jQuery Ajax Tooltip

jQuery (mb)Tooltip

jQuery (mb)Tooltip

jQuery Horizontal Tooltip Menu

jQuery Horizontal Tooltip Menu

Tipsy

Tipsy

jqTooltip

jqTooltip

jQuery & CSS Tooltip

jQuery & CSS Tooltip

Simple Tooltips with CSS & jQuery

Simple Tooltips with CSS & jQuery

jQuery Image Tooltips

jQuery Image Tooltips

jQuery and CSS3 Simple Tooltips

jQuery and CSS3 Simple Tooltips

Side Navigation Tooltip

Side Navigation Tooltip

Sticky Tooltip

Sticky Tooltip

Inline HTML Tooltip

Inline HTML Tooltip

For more resources please see: