Tooltip

<div style="padding: 20px 0;">
  <ef-button cta title="Sweet! Here is tooltip text.">Hover Me</ef-button>
</div>

Tooltip displays information when the user hovers over an item.

Basic usage

Import the ef-tooltip component and use the title attribute, just like with a standard tooltip.

<div class="wrapper">
  <abbr title="Don&apos;t Forget To Be Awesome">DFTBA</abbr>
  <abbr title="May The Force Be With You">MTFBWY</abbr>
  <abbr title="Element Framework">ELF</abbr>
</div>

.wrapper {
  padding: 40px 0;
  display: flex;
  align-items: center;
}

.wrapper>*:not(:last-child) {
  margin-right: 30px;
}

<abbr title="Don't Forget To Be Awesome">DFTBA</abbr>
<abbr title="May The Force Be With You">MTFBWY</abbr>
<abbr title="Element Framework">ELF</abbr>

ef-tooltip overrides the default title attribute behavior of the browser

Selector

ef-tooltip can be used for advanced use cases, such as specifying a position for tooltips, custom rendering, or displaying a tooltip only when certain conditions are met.

To customize the behavior of ef-tooltip, use selector to specify the CSS selector for the elemens and tooltip to specify the text content of the tooltip.

<div class="navigation" style="padding: 40px 0;">
  <ef-button tooltip="Hooray!">Hover Me</ef-button>
  <!-- Tooltip will not show on this button as tooltip nor title is defined -->
  <ef-button>No Tooltip</ef-button>
</div>

<ef-tooltip selector=".navigation ef-button"></ef-tooltip>

<div class="navigation">
    <ef-button tooltip="Hooray!">Hover Me</ef-button>
    <!-- Tooltip will not show on this button as tooltip nor title is defined -->
    <ef-button>No Tooltip</ef-button>
</div>
<ef-tooltip selector=".navigation ef-button"></ef-tooltip>

Positioning tooltips

By default, the tooltip position is based on the pointer coordinates (auto). However, the tooltip can be configured to display above, below, left, or right of the element.

<div class="navigation" style="padding: 40px 0;">
  <label above tooltip="Above tooltip">Above</label>
  <label below tooltip="Below tooltip">Below</label>
  <label left tooltip="Left tooltip">Left</label>
  <label right tooltip="Right tooltip">Right</label>
  <label auto tooltip="Auto tooltip">Auto</label>
</div>

<ef-tooltip position="above" selector=".navigation label[above]"></ef-tooltip>
<ef-tooltip position="right" selector=".navigation label[right]"></ef-tooltip>
<ef-tooltip position="below" selector=".navigation label[below]"></ef-tooltip>
<ef-tooltip position="left" selector=".navigation label[left]"></ef-tooltip>
<ef-tooltip selector=".navigation label[auto]"></ef-tooltip>

.navigation>* {
  margin-right: 30px;
}

<label above tooltip="Above tooltip">Above</label>
<label below tooltip="Below tooltip">Below</label>
<label left tooltip="Left tooltip">Left</label>
<label right tooltip="Right tooltip">Right</label>
<label auto tooltip="Auto tooltip">Auto</label>

<ef-tooltip position="above" selector="label[above]"></ef-tooltip>
<ef-tooltip position="right" selector="label[right]"></ef-tooltip>
<ef-tooltip position="below" selector="label[below]"></ef-tooltip>
<ef-tooltip position="left" selector="label[left]"></ef-tooltip>
<ef-tooltip selector="label[auto]"></ef-tooltip>

Tooltip transition styles

The default tooltip transition is fade. To make tooltips display with a different transition style, use the transition-style attribute. Note: the transition style should be used rationally with tooltip position.

<div class="navigation">
  <label fade tooltip="Fade">Fade</label>
  <label zoom tooltip="Zoom">Zoom</label>
  <label slide-down tooltip="Slide down">Slide Down</label>
  <label slide-up tooltip="Slide up">Slide Up</label>
  <label slide-left tooltip="Slide left">Slide Left</label>
  <label slide-right tooltip="Slide right">Slide Right</label>
</div>
<div class="navigation">
  <label slide-right-up tooltip="Slide right up">Slide Right Up</label>
  <label slide-right-down tooltip="Slide right down">Slide Right Down</label>
  <label slide-left-up tooltip="Slide left up">Slide Left Up</label>
  <label slide-left-down tooltip="Slide left down">Slide Left Down</label>
</div>

<ef-tooltip transition-style="fade" selector=".navigation label[fade]"></ef-tooltip>
<ef-tooltip transition-style="zoom" selector=".navigation label[zoom]"></ef-tooltip>
<ef-tooltip transition-style="slide-down" position="below" selector=".navigation label[slide-down]"></ef-tooltip>
<ef-tooltip transition-style="slide-up" position="above" selector=".navigation label[slide-up]"></ef-tooltip>
<ef-tooltip transition-style="slide-left" position="left" selector=".navigation label[slide-left]"></ef-tooltip>
<ef-tooltip transition-style="slide-right" position="right" selector=".navigation label[slide-right]"></ef-tooltip>
<ef-tooltip transition-style="slide-right-up" position="right" selector=".navigation label[slide-right-up]"></ef-tooltip>
<ef-tooltip transition-style="slide-right-down" position="right" selector=".navigation label[slide-right-down]"></ef-tooltip>
<ef-tooltip transition-style="slide-left-up" position="left" selector=".navigation label[slide-left-up]"></ef-tooltip>
<ef-tooltip transition-style="slide-left-down" position="left" selector=".navigation label[slide-left-down]"></ef-tooltip>

.navigation {
  padding: 20px 0px;
}

.navigation>* {
  margin-right: 30px;
}

<ef-tooltip transition-style="fade" selector=".navigation label[fade]"></ef-tooltip>
<ef-tooltip transition-style="zoom" selector=".navigation label[zoom]"></ef-tooltip>
<ef-tooltip transition-style="slide-down" position="below" selector=".navigation label[slide-down]"></ef-tooltip>
<ef-tooltip transition-style="slide-up" position="above" selector=".navigation label[slide-up]"></ef-tooltip>
<ef-tooltip transition-style="slide-left" position="left" selector=".navigation label[slide-left]"></ef-tooltip>
<ef-tooltip transition-style="slide-right" position="right" selector=".navigation label[slide-right]"></ef-tooltip>
<ef-tooltip transition-style="slide-right-up" position="right" selector=".navigation label[slide-right-up]"></ef-tooltip>
<ef-tooltip transition-style="slide-right-down" position="right" selector=".navigation label[slide-right-down]"></ef-tooltip>
<ef-tooltip transition-style="slide-left-up" position="left" selector=".navigation label[slide-left-up]"></ef-tooltip>
<ef-tooltip transition-style="slide-left-down" position="left" selector=".navigation label[slide-left-down]"></ef-tooltip>

Custom content

Custom content can be added to a tooltip instead of just text.

<div class="navigation" style="padding: 40px 0;">
  <ef-button>Hover Me</ef-button>
</div>

<ef-tooltip selector=".navigation ef-button">
  <table>
    <thead>
      <tr>
        <th>GOOGL.O</th>
        <th>NFLX.O</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="color: green">$1,030.45 (+0.2949%)</td>
        <td style="color: red">$266.98 (-1.3378%)</td>
      </tr>
    </tbody>
  </table>
</ef-tooltip>

<div class="navigation">
    <ef-button>Hover Me</ef-button>
</div>
<ef-tooltip selector=".navigation ef-button">
  <table>
    <thead>
      <tr>
        <th>GOOGL.O</th>
        <th>NFLX.O</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="color: green">$1,030.45 (+0.2949%)</td>
        <td style="color: red">$266.98 (-1.3378%)</td>
      </tr>
    </tbody>
  </table>
</ef-tooltip>

Custom rendering

Use custom rendering to display HTML content in a tooltip. The content passed to the renderer function needs to be an HTMLElement object.

Note: If title attribute is provided; or custom content of tooltip is specified, renderer will be ignored.

<div style="padding: 60px 0;">
  <label class="symbol" id="google">GOOGL.O</label>
  <label class="symbol" id="facebook">FB.O</label>
  <label class="symbol" id="netflix">NFLX.O</label>
</div>
<ef-tooltip id="symbol-tooltip" selector=".symbol"></ef-tooltip>

var tooltip = document.getElementById('symbol-tooltip');
tooltip.renderer = function(target) {
  var ret = document.createElement('div');
  var title = document.createElement('div');
  title.style.fontWeight = 'bold';
  title.style.paddingBottom = '3px';
  var price = document.createElement('div');
  ret.appendChild(title);
  ret.appendChild(price);

  switch (target.id) {
    case 'google':
      title.innerText = 'Alphabet Inc';
      price.innerText = '$1,030.45 (+0.2949%)';
      price.style.color = 'green';
      break;
    case 'facebook':
      title.innerText = 'Facebook Inc';
      price.innerText = '$132.43 (+0.6689%)';
      price.style.color = 'green';
      break;
    case 'netflix':
      title.innerText = 'Netflix Inc';
      price.innerText = '$266.98 (-1.3378%)';
      price.style.color = 'red';
      break;
    default:
      ret = null;
      break;
  }
  return ret;
}

.symbol {
  margin-right: 30px;
}

<label class="symbol" id="google">GOOGL.O</label>
<label class="symbol" id="facebook">FB.O</label>
<label class="symbol" id="netflix">NFLX.O</label>
<ef-tooltip id="symbol-tooltip" selector=".symbol"></ef-tooltip>

<script>
    var tooltip = document.getElementById('symbol-tooltip');
    tooltip.renderer = function (target) {
        var ret = document.createElement('div');
        var title = document.createElement('div');
        title.style.fontWeight = 'bold';
        title.style.paddingBottom = '3px';
        var price = document.createElement('div');
        ret.appendChild(title);
        ret.appendChild(price);

        switch(target.id) {
            case 'google':
                title.innerText = 'Alphabet Inc';
                price.innerText = '$1,030.45 (+0.2949%)';
                price.style.color = 'green';
                break;
            case 'facebook':
                title.innerText = 'Facebook Inc';
                price.innerText = '$132.43 (+0.6689%)';
                price.style.color = 'green';
                break;
            case 'netflix':
                title.innerText = 'Netflix Inc';
                price.innerText = '$266.98 (-1.3378%)';
                price.style.color = 'red';
                break;
            default:
                ret = null;
                break;
        }
        return ret;
    }
</script>

A custom renderer can also be applied to only show tooltips when the text is too long and does not fit the container.

.item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

var tooltip = document.getElementById('item-tooltip');

tooltip.renderer = function (target) {
  if (target.scrollWidth - target.clientWidth === 0) {
    return null;
  }
  // return itself as content of tooltip
  return target;
};

Conditioning tooltip

Use custom condition to trigger a tooltip only when a condition is met.

<div style="padding: 30px 0;">
  <ef-text-field style="width:400px" id="amount" tooltip="Value must be number and at least 100" placeholder="Input amount. Tooltip will show when input invalid."></ef-text-field>
  <ef-tooltip id="amount-tooltip"></ef-tooltip>
</div>

var input = document.getElementById('amount');
var tooltip = document.getElementById('amount-tooltip');
var isValid = function(val) {
  return isNaN(parseInt(val, 10)) || parseInt(val, 10) < 100;
};

input.addEventListener('value-changed', function() {
  input.error = isValid(input.value);
});

tooltip.condition = function(target, paths) {
  return target === input && isValid(target.value);
};

<ef-text-field id="amount" tooltip="Value must be number and at least 100" placeholder="Input amount. Tooltip will show when input invalid."></ef-text-field>
<ef-tooltip id="amount-tooltip"></ef-tooltip>

var input = document.getElementById('amount');
var tooltip = document.getElementById('amount-tooltip');
var isValid = function (val) {
  return isNaN(parseInt(val, 10)) || parseInt(val, 10) < 100;
};

input.addEventListener('value-changed', function () {
  input.error = isValid(input.value);
});

tooltip.condition = function (target, paths) {
  return target === input && isValid(target.value);
};

Default tooltip

It is recommended to have only one instance of tooltip per page. A default tooltip element is always included when the developer adds ef-tooltip to an application.

Use addTooltipCondition and removeTooltipCondition to reuse the default tooltip:

import { addTooltipCondition, removeTooltipCondition } from '@refinitiv-ui/tooltip';

// Show tooltip for elements that have "ref" attribute
const condition = target => target.hasAttribute('ref');

// Show tooltip content
const render = target => `My reference is: ${target.getAttribute('ref')}`;

addTooltipCondition(condition, render);

// Do not forget to remove tooltip condition once not required to avoid memory leaks
removeTooltipCondition(condition);

Overflow tooltip

Overflow tooltip reuses the concept of Default tooltip to display a tooltip when text overflows:

<style>
  .overflow {
    white-space: nowrap;
    width: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<div class="overflow">Very long text with overflow</div>

import { registerOverflowTooltip } from '@refinitiv-ui/tooltip';
const overflowElement = document.querySelector('.overflow');
registerOverflowTooltip(overflowElement);

Time Delay

A timer to show or hide a tooltip can be customized using the --show-delay and --hide-delay CSS variables.

Note: setting these variables to small values can cause performance issues.

<div style="padding: 30px 0;">
  <label id="delay-label" tooltip="Hello! I will hide within 2 seconds.">Hover me. and wait for 3 second</label>
  <ef-tooltip class="delay" selector="#delay-label"></ef-tooltip>
</div>

.delay {
  --show-delay: 3000ms;
  --hide-delay: 2000ms;
}

.delay {
  --show-delay: 3000ms;
  --hide-delay: 2000ms;
}

<label id="delay-label" tooltip="Hello! 2 seconds, I will hide.">Hover me. and wait 3 second</label>
<ef-tooltip class="delay" selector="#delay-label"></ef-tooltip>