2 years ago
1893 Views

Build A Responsive Tooltip With jQuery

Written by
Responsive Tooltip thumb

Tooltip is a splendid invention. Small detail in web design that plays a big role when it comes to user experience. Usually, tooltips are used to present a tiny amount of hidden content (mainly explanatory, so-called tips), that pops up when user moves a cursor over or clicks (less common) on a special target.

Responsive Tooltip

Osvaldas Valutis built a Responsive tooltip using CSS and jQuery. It relies on a maximum width value when viewed on large screens, adopts to narrow environments and picks the best viewable position relatively to the target. It’s mobile-friendly. It pops up when a call-to-action button is tapped and disappears when tapped on the tooltip itself.

Key Features:

[list style=”1″ underline=”1″]
  • It’s responsive. It relies on a maximum width value when viewed on large screens, adopts to narrow environments and picks the best viewable position relatively to the target (top, bottom; left, center, right);
  • It’s mobile-friendly. It pops up when a call-to-action button is tapped and disappears when tapped on the tooltip itself;
  • It’s HTML formatting capable. Need to write some words in italic or so? No problem, this will work out.
[/list][margin_15b]

How To Implement

  1. Put the CSS code anywhere in existing CSS file or create a new one. You can also insert it in HTML file in head by wrapping the code with <style> and </style> tags.
  2. Put the JavaScript code in existing JS file or create a new one. You can also insert it in HTML file inhead or, better, body by wrapping the code with <script> and </script> tags.
  3. Assign the attribute rel="tooltip" and title="Enter your tip here" to any of body tags in HTML file where you want the tooltip to pop up when called. Set title value with your tip (use<strong><em> etc. to distinguish text fragments, but avoid block elements).

Also, be sure that you already have jquery library included.

[button style=”3″ caption=”Demo” link=”http://osvaldas.info/examples/elegant-css-and-jquery-tooltip-responsive-mobile-friendly/”][/button] [button style=”4″ caption=”Download Now” link=”http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly”][/button]

21 year old designer, blogger and front-end developer. love to share creative design and inspiration.