Coding
posted by Maan

Build A Responsive Tooltip With jQuery

Build A Responsive Tooltip With jQuery

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:

    • 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.

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.

Maan

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

comments powered by Disqus