Go to rebrand

Tooltip

Tooltip

Tooltips for everyone

How to use it

  1. Include ca_styleguide_lazyload.js
  2. Include ca_styleguide_tooltip.js
  3. Include ca_styleguide_tooltip.css

In order to Tooltip works correctly, it is required to load the ca_styleguide_tooltip.js using lazy load

<script class="lazy-load" data-src="/static/js/ca_styleguide_lazyload.js"></script>

Then simply use the data-tooltip="" attribute on a wrapping div with the class ca-tt-wrap for have it trigger the tooltip

<div class="ca-tt-wrap" data-tooltip='{configuration}'> <your SVG icon>...</your SVG icon> </div>

How to configure it

Configuration should be present on all elements that will trigger the tooltip using the attribute data-tooltip.
This attribute is a JSON object and only the text is required. See available configurations bellow:

Default configuration

{ "text":"Please add the text for the tooltip", "offsetX":0, "offsetY":0 }

Available configurations

  • text: Free text, html is allowed (required).
    • Any <b> tag will be treated as the tooltip title
    • Any <p> tag will be treated as a paragraph
    • Any <b> tag inside a <p> tag, will be treated normally as bold
  • offsetX: Positive or negative horizontal offset
  • offsetY: Positive or negative vertical offset
  • position: 'left'|'right'(default)|'top'|'bottom'

Examples

Plain text

<div class="ca-tt-wrap" data-tooltip='{"text":"Lorem ipsum..."}'> <svg></svg> </div>

HTML

<div class="ca-tt-wrap" data-tooltip='{"text":"<b>Lorem ipsum</b><p>Lorem ipsum...</p>"}'> <svg></svg> </div>

HTML + offsetX

<div class="ca-tt-wrap" data-tooltip='{"text":"<b>Lorem ipsum</b><p>Lorem ipsum...</p>", "offsetX":"15px"}'> <svg></svg> </div>

HTML + offsetY

<div class="ca-tt-wrap" data-tooltip='{"text":"<b>Lorem ipsum</b><p>Lorem ipsum...</p>", "offsetY":"15px"}'> <svg></svg> </div>

Filled with External text

If you need the tooltip to not populate from it's own data-tooltip text attribute, set ignoreText

<div class="ca-tt-wrap" data-tooltip='{"ignoreText": true}'> <svg></svg> </div>

Position:

Left
<div class="ca-tt-wrap" data-tooltip='{"text": "Lorem ipsum...", "position": "left"}'> <svg></svg> </div>
Right (default)
<div class="ca-tt-wrap" data-tooltip='{"text": "Lorem ipsum..."}'> <svg></svg> </div>
Bottom
<div class="ca-tt-wrap" data-tooltip='{"text": "Lorem ipsum...", "position": "bottom"}'> <svg></svg> </div>
Top
<div class="ca-tt-wrap" data-tooltip='{"text": "Lorem ipsum...", "position": "top"}'> <svg></svg> </div>

Adaptation

Left
<div class="ca-tt-wrap" data-tooltip='{"text": "Lorem ipsum...", "position": "left"}'> <svg></svg> </div>

Please make your browser narrow to see this one. If there's no space to the left, it will open to the right.

Right
<div class="ca-tt-wrap" data-tooltip='{"text": "Lorem ipsum...", "position": "right"}'> <svg></svg> </div>

If there's no space to the right, it will open to the left.

Styling

Any cosmetic styling should be done using CSS. The CSS class for the tooltip element is .js-tooltip

Refreshing/After load

If you need to refresh or rebind the elements because they were replaced or placed after load (ie. ajax), you should call:

Tooltip.refreshTargets(element)

Where element is an HTMLElement where to search for tooltip triggers, the more specific the better.

Open Event

Everytime a tooltip is open it'll dispatch a custom event called com.consumeraffairs.styleguide.tooltip.open