OLYSENSE Design System

A tooltip’s target is its first child element, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first. Tooltips use display: contents so they won’t interfere with how elements are positioned in a flex or grid layout.

Hover Me

<ods-tooltip content="This is a tooltip">
    <ods-button variant="primary">Hover Me</ods-button>
</ods-tooltip>

import { OdsTooltip } from '@ods/components/react.tooltip';
import { OdsButton } from '@ods/components/react.button';

const Example = () => (
  <OdsTooltip content="This is a tooltip">
    <OdsButton variant="primary">Hover Me</OdsButton>
  </OdsTooltip>
);

export default Example;

Use the placement attribute to set the preferred placement of the tooltip.

<div class="w-[300px]">
  <div class="w-full flex flex-row justify-center gap-16">
    <ods-tooltip content="top-start" placement="top-start">
      <ods-button class="w-40 h-40"></ods-button>
    </ods-tooltip>

    <ods-tooltip content="top" placement="top">
      <ods-button class="w-40 h-40"></ods-button>
    </ods-tooltip>

    <ods-tooltip content="top-end" placement="top-end">
      <ods-button class="w-40 h-40"></ods-button>
    </ods-tooltip>
  </div>

  <div class="flex flex-row gap-16 justify-between">
    <div class="flex flex-col gap-16">
      <ods-tooltip content="left-start" placement="left-start">
        <ods-button class="w-40 h-40"></ods-button>
      </ods-tooltip>

      <ods-tooltip content="left" placement="left">
        <ods-button class="w-40 h-40"></ods-button>
      </ods-tooltip>

      <ods-tooltip content="left-end" placement="left-end">
        <ods-button class="w-40 h-40"></ods-button>
      </ods-tooltip>
    </div>

    <div class="flex flex-col gap-16">
      <ods-tooltip content="right-start" placement="right-start">
        <ods-button class="w-40 h-40"></ods-button>
      </ods-tooltip>

      <ods-tooltip content="right" placement="right">
        <ods-button class="w-40 h-40"></ods-button>
      </ods-tooltip>

      <ods-tooltip content="right-end" placement="right-end">
        <ods-button class="w-40 h-40"></ods-button>
      </ods-tooltip>
    </div>
  </div>

  <div class="test w-full flex flex-row justify-center gap-16">
    <ods-tooltip content="bottom-start" placement="bottom-start">
      <ods-button class="w-40 h-40"></ods-button>
    </ods-tooltip>

    <ods-tooltip content="bottom" placement="bottom">
      <ods-button class="w-40 h-40"></ods-button>
    </ods-tooltip>

    <ods-tooltip content="bottom-end" placement="bottom-end">
      <ods-button class="w-40 h-40"></ods-button>
    </ods-tooltip>
  </div>
</div>

<script>
  console.log('Hello@@@@');
</script>

import { OdsTooltip } from '@ods/components/react.tooltip';
import { OdsButton } from '@ods/components/react.button';

const PlacementExample = () => {
  return (
    <div className="w-[300px]">
      <div className="w-full flex flex-row justify-center gap-16">
        <OdsTooltip content="top-start" placement="top-start">
          <OdsButton className="w-40 h-40"></OdsButton>
        </OdsTooltip>

        <OdsTooltip content="top" placement="top">
          <OdsButton className="w-40 h-40"></OdsButton>
        </OdsTooltip>

        <OdsTooltip content="top-end" placement="top-end">
          <OdsButton className="w-40 h-40"></OdsButton>
        </OdsTooltip>
      </div>

      <div className="flex flex-row gap-16 justify-between">
        <div className="flex flex-col gap-16">
          <OdsTooltip content="left-start" placement="left-start">
            <OdsButton className="w-40 h-40"></OdsButton>
          </OdsTooltip>

          <OdsTooltip content="left" placement="left">
            <OdsButton className="w-40 h-40"></OdsButton>
          </OdsTooltip>

          <OdsTooltip content="left-end" placement="left-end">
            <OdsButton className="w-40 h-40"></OdsButton>
          </OdsTooltip>
        </div>

        <div className="flex flex-col gap-16">
          <OdsTooltip content="right-start" placement="right-start">
            <OdsButton className="w-40 h-40"></OdsButton>
          </OdsTooltip>

          <OdsTooltip content="right" placement="right">
            <OdsButton className="w-40 h-40"></OdsButton>
          </OdsTooltip>

          <OdsTooltip content="right-end" placement="right-end">
            <OdsButton className="w-40 h-40"></OdsButton>
          </OdsTooltip>
        </div>
      </div>

      <div className="test w-full flex flex-row justify-center gap-16">
        <OdsTooltip content="bottom-start" placement="bottom-start">
          <OdsButton className="w-40 h-40"></OdsButton>
        </OdsTooltip>

        <OdsTooltip content="bottom" placement="bottom">
          <OdsButton className="w-40 h-40"></OdsButton>
        </OdsTooltip>

        <OdsTooltip content="bottom-end" placement="bottom-end">
          <OdsButton className="w-40 h-40"></OdsButton>
        </OdsTooltip>
      </div>
    </div>
  )
}

export default PlacementExample;

Set the trigger attribute to click to toggle the tooltip on click instead of hover.

Click to Toggle

<ods-tooltip content="Click again to dismiss" trigger="click">
    <ods-button variant="primary">Click to Toggle</ods-button>
</ods-tooltip>

import { OdsTooltip } from '@ods/components/react.tooltip';
import { OdsButton } from '@ods/components/react.button';

const Example = () => (
  <OdsTooltip content="Click again to dismiss" trigger="click">
    <OdsButton variant="primary">Click to Toggle</OdsButton>
  </OdsTooltip>
);

export default Example;

Tooltips can be controlled programmatically by setting the trigger attribute to manual. Use the open attribute to control when the tooltip is shown.

Toggle Manually

<ods-button variant="primary" class="toggle-button">Toggle Manually</ods-button>

<ods-tooltip content="This is a disabled trash can!" trigger="manual" class="manual-tooltip">
  <ods-button disabled>
    <ods-icon slot="prefix" name="trash" class="text-xl"></ods-icon>
  </ods-button>
</ods-tooltip>

<script>
  const tooltip = document.querySelector('.manual-tooltip');
  const toggle = tooltip.previousElementSibling;

  toggle.addEventListener('click', () => (tooltip.open = !tooltip.open));
</script>

<style>
  .toggle-button {
    margin-right: 4rem;
  }
</style>

import { useState } from 'react';
import { OdsTooltip } from '@ods/components/react.tooltip';
import { OdsButton } from '@ods/components/react.button';
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsButton
        variant='primary'
        className='mr-64'
        onClick={() => setOpen(!open)}>
        Toggle Manually
      </OdsButton>

      <OdsTooltip
        open={open}
        content="This is a disabled trash can!"
        trigger="manual"
        className="manual-tooltip">
        <OdsButton disabled>
          <OdsIcon
            slot="prefix"
            name="trash"
            className="text-xl">
          </OdsIcon>
        </OdsButton>
      </OdsTooltip>
    </>
  );
};

export default Example;

Importing

import '@ods/components/web.tooltip';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
content	The content to render in the tooltip. Alternatively, you can use the `content` attribute.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
content	string	''
placement	\| 'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start' \| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end'	'top'
disabled	boolean	false
distance	number	8
open	boolean	false
skidding	number	0
trigger	string	'hover focus'
hoist	boolean	false

Events

React Event	Description	Event Detail
ods-show	Emitted when the tooltip begins to show.	--
ods-after-show	Emitted after the tooltip has shown and all animations are complete.	--
ods-hide	Emitted when the tooltip begins to hide.	--
ods-after-hide	Emitted after the tooltip has hidden and all animations are complete.	--

Methods

Name	Description	Arguments
show()	Shows the tooltip.	--
hide()	Hides the tooltip	--

Parts

Name	Description
base	The component's base wrapper, an `<ods-popup>` element.
base__popup	The popup's exported `popup` part. Use this to target the tooltip's popup container.
base__arrow	The popup's exported `arrow` part. Use this to target the tooltip's arrow.
body	The tooltip's body where its content is rendered.

Dependencies

This component automatically imports the following dependencies.

ods-popup

Tooltip

Examples

Placement

Click Trigger

Manual Trigger

Importing

Slots

Properties

Events

Methods

Parts

Dependencies