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