What the heck happened to the rest of the UIF documentation?

All the CSS-only components have been moved across to the Storybook version of our UIF docs.

The jQuery dependent components are considered legacy, and while still currently available, are not going to be actively developed upon any longer. Also, it's a schlep trying to get jQuery to work within webpack/storybook, so they can stay here.

Please consider using CSS-only components for maximum ongoing happiness. 💖

Tooltip
ready

Introduction

Provides helpful information to users on hover for non-touch devices and hit for touch devices. It makes use of the value assigned to the element's title attribute.

Examples

Basic Tooltip

Help Tooltip 
<span title="By golly Watkins! That is simply outstanding, dear boy. Go on, run along now dear chap." 
          class="icon icon--help-circ-blue" 
          data-js="tooltip">Help</span>
    <span class="icon-text">Tooltip</span>

Tooltip hover ONLY

Help Tooltip 
<span title="By golly Watkins! That is simply outstanding, dear boy. Go on, run along now dear chap." 
          class="icon icon--help-circ-blue" 
          data-js="tooltip"
          data-tooltip-action="true">Help</span>
    <span class="icon-text">Tooltip</span>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/elements/_tooltip.scss
  • src/scripts/modules/jquery.pfTooltip.js

Usage

Class/JavaScript Hook Description Required?
[data-js=tooltip] Placed on any element with a defined title attribute that you want to be enhanced into a tooltip. Required
[data-tooltip-action=true] Placed on any tooltip trigger that should be ignored on touch devices, because it has a link/action already associated to it that the tooltip should not mess with on hit. Put another way, the tooltip will only show on hover when this is added. Optional