Back to blue

Tooltip v2

Tooltip component with a auto repositioning feature provided by the Popper.Js library.

How to use it

    1. Include ca_styleguide_lazyload.js
    2. Include ca_styleguide_tooltip_v2.js
    3. Include ca_sg_tooltip_v2.css
  • In order for the Tooltip to work properly, it is required to load the ca_styleguide_tooltip_v2.js using lazy load.

    <script class="lazy-load" data-src="/static/js/ca_styleguide_tooltip_v2.js"></script>
  • Then just place the base tooltip on the HTML by seeting the trigger with the js-tooltip class.

    <svg class="js-tooltip" data-tooltip-options='{ "content": "test content" }' > SVG content </svg>

How to configure it

Passing through data attributes

The options wiil be on a JSON format inside a data attribute called data-tooltip-options. Check the available configurations bellow:

<svg class="js-tooltip" data-tooltip-options='{"content": "lorem lorem lorem","flip": "true","placement": "auto","offsetX": "0","offsetY": "15"}' > SVG content </svg>

A default tooltip

It will have the placement: auto and the flip: true.

The content option accepts any kind of text, including HTML

<svg class="js-tooltip" data-tooltip-options='{ "content": "<h2>Tooltip Title<h2><br/><p>Lorem lorem ipsum lorem lorem lorem ipsum ipsum <b>bold</b> lorem ipsum<p>" }' > SVG content </svg>

Setting an offset X

<svg class="js-tooltip" data-tooltip-options='{ "offsetX": "50" }' > SVG content </svg>

Setting an offset Y

<svg class="js-tooltip" data-tooltip-options='{ "offsetY": "50" }' > SVG content </svg>

Recalculate the positioning

By default, the tooltip positioning is recalculated to the oposite side when there is no space available on the placement direction.

If this behaviour is not wanted, it can be turned off by setting an option flip: false or through the data attribute data-flip="false".

When the original placement is top

<svg class="js-tooltip-trigger" data-tooltip-options='{ "placement": "top", "content": "lorem lorem" }' > SVG content </svg>

Please check the tooltip, scroll the page to the bottom and then check the tooltip position again. If there's no space to the top, it will open to the bottom.

When the original placement is bottom

<svg class="js-tooltip-trigger" data-tooltip-options='{ "placement": "bottom", "content": "lorem lorem" }' > SVG content </svg>

Please check the tooltip, scroll the page to the top and then check the tooltip again. If there's no space to the bottom, it will open to the top.

When the original placement is right

<svg class="js-tooltip-trigger" data-tooltip-options='{ "placement": "right", "content": "lorem lorem" }' > SVG content </svg>

Please check the tooltip, resize the page decreasing the width size and then check the tooltip position again. If there's no space to the right, it will open to the left.

When the original placement is left

<svg class="js-tooltip-trigger" data-tooltip-options='{ "placement": "left", "content": "lorem lorem" }' > SVG content </svg>

Please check the tooltip, press the Recalculate button and then check the tooltip position again. If there's no space to the left, it will open to the right.

Tooltip with a placement fixed

When the tooltip placement is top

<svg class="js-tooltip-trigger" data-tooltip-options='{ "flip": "false", "placement": "top", "content": "lorem lorem" }' > SVG content </svg>

When the tooltip placement is top-start

<svg class="js-tooltip-trigger" data-tooltip-options='{ "flip": "false", "placement": "top-start", "content": "lorem lorem" }' > SVG content </svg>

When the tooltip placement is top-end

<svg class="js-tooltip-trigger" data-tooltip-options='{ "flip": "false", "placement": "top-end", "content": "lorem lorem" }' > SVG content </svg>

When the tooltip placement is right

<svg class="js-tooltip-trigger" data-tooltip-options='{ "flip": "false", "placement": "right", "content": "lorem lorem" }' > SVG content </svg>

When the tooltip placement is right-start

<svg class="js-tooltip-trigger" data-tooltip-options='{ "flip": "false", "placement": "right-start", "content": "lorem lorem" }' > SVG content </svg>

When the tooltip placement is right-end

<svg class="js-tooltip-trigger" data-tooltip-options='{ "flip": "false", "placement": "right-end", "content": "lorem lorem" }' > SVG content </svg>

When the tooltip placement is bottom

<svg class="js-tooltip-trigger" data-tooltip-options='{ "flip": "false", "placement": "bottom", "content": "lorem lorem" }' > SVG content </svg>

When the tooltip placement is bottom-start

<svg class="js-tooltip-trigger" data-tooltip-options='{ "flip": "false", "placement": "bottom-start", "content": "lorem lorem" }' > SVG content </svg>

When the tooltip placement is bottom-end

<svg class="js-tooltip-trigger" data-tooltip-options='{ "flip": "false", "placement": "bottom-end", "content": "lorem lorem" }' > SVG content </svg>

When the tooltip placement is left

<svg class="js-tooltip-trigger" data-tooltip-options='{ "flip": "false", "placement": "left", "content": "lorem lorem" }' > SVG content </svg>

When the tooltip placement is left-start

<svg class="js-tooltip-trigger" data-tooltip-options='{ "flip": "false", "placement": "left-start", "content": "lorem lorem" }' > SVG content </svg>

When the tooltip placement is left-end

<svg class="js-tooltip-trigger" data-tooltip-options='{ "flip": "false", "placement": "left-end", "content": "lorem lorem" }' > SVG content </svg>

Refreshing/After load

Demo

If you need to refresh or rebind the elements because they were replaced or placed after load (ie. ajax), you should dispatch the event com.consumeraffairs.styleguide.tooltip.refreshTargets:

const refreshTargetsEvent = new CustomEvent(com.consumeraffairs.styleguide.tooltip.refreshTargets, { detail: triggerContainer }); window.dispatchEvent(refreshTargetsEvent);

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