Tooltips

Tooltips are used to highlight or emphasise specific elements on a page (for example a form field). They are positioned elements which sit relative to an element and can sit above, below or to the sides of that element. The arrow position will be changed dynamically to correctly point to the element it’s referencing.

Usage

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
html
            <button href="#/" class="rc-btn rc-btn--two" data-tooltip="top-tooltip" data-tooltip-placement="top" title="Top">Top</button>
<div id="top-tooltip" class="rc-tooltip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
html
            <button href="#/" class="rc-btn rc-btn--two" data-tooltip="bottom-tooltip" data-tooltip-placement="bottom" title="Bottom">Bottom</button>
<div id="bottom-tooltip" class="rc-tooltip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
html
            <button href="#/" class="rc-btn rc-btn--two" data-tooltip="right-tooltip" data-tooltip-placement="right" title="Right">Right</button>
<div id="right-tooltip" class="rc-tooltip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
html
            <button href="#/" class="rc-btn rc-btn--two" data-tooltip="left-tooltip" data-tooltip-placement="left" title="Left">Left</button>
<div id="left-tooltip" class="rc-tooltip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 8th March 2018 [ui_assets/elements/tooltips.yml]
    Re-ordered nav items
  • 8th March 2018 [ui_assets/elements/tooltips.yml]
    Ordered elements alpabetically
  • 18th February 2018 [ui_assets/elements/tooltips.yml]
    Update tooltip data attribute.
  • 16th February 2018 [ui_assets/elements/tooltips.yml]
    Added tooltips to header and updated tooltip page
  • 15th February 2018 [ui_assets/elements/tooltips.yml]
    Added example tooltip to header markup
  • 1st February 2018 [ui_assets/elements/tooltips.yml]
    Updated icon classes
  • 29th January 2018 [ui_assets/elements/tooltips.yml]
    Update button classnames
  • 1st December 2017 [ui_assets/elements/tooltips.yml]
    Reorganised elements navigation
  • 1st December 2017 [ui_assets/elements/tooltips.yml]
    Restructured folder order.
  • 13th November 2017 [ui_assets/elements/tooltips.yml]
    Added paragraph twig filter and removed p tags from YAML
  • 9th October 2017 [ui_assets/elements/tooltips.yml]
    Removed clock div from tooltip, escaped html chars in text on cards page
  • 29th August 2017 [ui_assets/elements/tooltips.yml]
    Refactored naming convention used for levels of abstraction. https://trello.com/c/H5kTHTkZ/259-copy-change-update-naming-convention-on-sidebar
  • 19th July 2017 [ui_assets/elements/tooltips.yml]
    Added associated files to page config for use with git info collection.
  • 15th July 2017 [ui_assets/elements/tooltips.yml]
    Git commit message sync improvements. Folder restructure.
  • 15th July 2017 [ui_assets/elements/tooltips.yml]
    Copy and markup improvements.
  • 11th July 2017 [ui_assets/elements/tooltips.yml]
    Added remaining content.