OTTODesign System

Code

Tooltip

Storybook group: Components · Sidebar path: Components/Tooltip · Extracted 28.09.2026

Version Tag Status API
v2 <oc-tooltip-v2> Stable, allowed for generation TooltipV2
v1 <oc-tooltip-v1> Deprecated, NOT allowed for generation TooltipV1

Only the latest version (v2) is allowed for generation. Older versions are kept for reference and are deprecated.

Overview (v2)

Source: ./src/components/tooltip/v2/Overview.mdx

Tooltip

Global tooltip that attaches to any element via a data-oc-tooltip-v2 attribute, rather than being used as a component in markup directly.

Default variation

Story Default:

Configuration

Explore all available configuration options in the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the tooltip into your project, make sure you have correctly installed the OTTO components package. Add the data-oc-tooltip-v2 attribute to any element to turn it into a tooltip trigger. No wrapping element or slot is required. Look through the variations page for examples of possible variations, including reading the tooltip text from an aria-label and only showing the tooltip on text overflow.

Info

See the Tooltip UX documentation for detailed user experience guidelines.

Note

If you're currently using the tooltip variant of oc-popover-v1, switch to oc-tooltip-v2 instead. It only needs a single attribute, requires no wrapping element, and derives its text automatically from the trigger's accessible name.

Accessibility

The tooltip comes with a set of built-in accessibility features to ensure a seamless experience for all users.

ARIA attributes

The tooltip's visible content is not read by screen readers directly. Instead, screen readers announce the trigger element's own accessible name (aria-label, aria-labelledby, or its text content). When data-oc-tooltip-v2 is used without an explicit text value, the tooltip text is derived from that same accessible name, so sighted and screen reader users always receive the same information.

Configuration (v2)

Source: ./src/components/tooltip/v2/Configuration.mdx

Tooltip configuration

Configure the tooltip component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Story Default:

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

Migration (v2)

Source: ./src/components/tooltip/v2/Migration.mdx

Migration from Tooltip v1 to v2

The oc-tooltip has been updated from oc-tooltip-v1 to oc-tooltip-v2. This migration guide provides step-by-step instructions to update your project to the latest version.

Skip to:

What's new

Attribute-driven

The oc-tooltip-v2 is no longer a wrapping component with slots. It is applied directly to any existing element via the data-oc-tooltip-v2 attribute, providing:

  • No extra wrapping element or shadow DOM around your trigger
  • Automatic tooltip text derived from the trigger's own accessible name (aria-label, aria-labelledby, or text content) when no explicit text is given
  • An opt-in mode that only shows the tooltip when the trigger's text is actually truncated/overflowing

API changes

Changed structure

The oc-tooltip-v2 has transitioned from a wrapping web component with slots to a plain data attribute on the trigger element itself:

<!-- From: -->
<oc-tooltip-v1 position="top">
  <oc-icon-button-v3 icon="copy" oc-aria-label="Kopieren"></oc-icon-button-v3>
  <div slot="tooltip-content">Kopieren</div>
</oc-tooltip-v1>

<!-- To: -->
<oc-icon-button-v3 icon="copy" oc-aria-label="Kopieren" data-oc-tooltip-v2></oc-icon-button-v3>
New attributes

The following attributes have been added in v2:

Attribute Description Notes
data-oc-tooltip-v2 Marks an element as a tooltip trigger and optionally sets the tooltip text Replaces the oc-tooltip-v1 wrapper element
data-oc-tooltip-v2.overflow Only shows the tooltip if the trigger (or a descendant) is truncated/overflowing New capability, not available in v1
Removed attributes

The following attributes have been removed, since positioning is now handled automatically via CSS anchor positioning:

v1 Attribute v2 Equivalent Notes
position none The tooltip position is now calculated automatically based on viewport space
disabled none Remove the data-oc-tooltip-v2 attribute to disable the tooltip entirely
Removed methods

The following methods have been removed:

v1 Method v2 Equivalent Notes
recalcPosition() none Positioning is now recalculated automatically
Removed slots

The following slots have been removed:

v1 Slot v2 Equivalent Notes
default none The trigger element itself is used directly, no wrapper is needed
tooltip-content data-oc-tooltip-v2="…" Pass the tooltip text as the attribute value instead of a slotted element

How to migrate

Remove the oc-tooltip-v1 wrapper and add data-oc-tooltip-v2 directly to the element that should trigger the tooltip. If you don't provide an explicit text value, the tooltip falls back to the trigger's own accessible name.

Migrate a basic tooltip

Replace the wrapper and tooltip-content slot with a data-oc-tooltip-v2 attribute holding the tooltip text.

<!-- From: -->
<oc-tooltip-v1>
  <button>Copy</button>
  <div slot="tooltip-content">Copy to clipboard</div>
</oc-tooltip-v1>

<!-- To: -->
<button data-oc-tooltip-v2="Copy to clipboard">Copy</button>
Migrate a tooltip that reads its text from aria-label

If the tooltip text should match the trigger's aria-label, set data-oc-tooltip-v2 without an explicit value.

<!-- From: -->
<oc-tooltip-v1>
  <oc-icon-button-v3 icon="wishlist" oc-aria-label="Add to wishlist"></oc-icon-button-v3>
  <div slot="tooltip-content">Add to wishlist</div>
</oc-tooltip-v1>

<!-- To: -->
<oc-icon-button-v3
  icon="wishlist"
  oc-aria-label="Add to wishlist"
  data-oc-tooltip-v2
></oc-icon-button-v3>
Migrate a tooltip that should only show on text overflow

Add data-oc-tooltip-v2.overflow alongside data-oc-tooltip-v2 to only show the tooltip when the trigger's text is actually truncated. This has no v1 equivalent.

<!-- To: -->
<button
  style="max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
  data-oc-tooltip-v2
  data-oc-tooltip-v2.overflow
>
  A rather long button label that will get truncated
</button>

API v1 (v1, deprecated, not for generation)

Source: ./src/components/tooltip/v1/TooltipV1.API.g.mdx

Tooltip v1 API

API: <oc-tooltip-v1> (TooltipV1)

The oc-tooltip-v1 component provides customizable tooltips that can display additional information when hovering over or focusing on an element. It is stylable and supports adjustable positions and custom content.

Attributes / properties
Attribute Type Default Required Description
disabled boolean no If true, tooltip does not activate on hover/focus, only programmatically.
position "top" | "bottom" "bottom" no Sets the tooltip position. Note: The position changes, based on the available space in the viewport.
Slots
Slot Required Description
default yes Specifies the element that triggers the tooltip.
tooltip-content yes Sets the text message that appears in the tooltip.
Example:
<div slot='tooltip-content'>Copy</div>
Events
Event Detail type Description
oc-property-change OcTooltipV1Events["oc-property-change"] Whenever a property value changes, this event triggers. Use this event to track all property changes within the component.

Refer to the Events documentation for more information.
oc-mount { component: string; } Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
oc-unmount { component: string; } Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.
Methods

  • recalcPosition: () => void

    Recalculates the position of the tooltip. This can be useful if the content of the tooltip changes dynamically, or if the position of the trigger element changes.

    Returns: void

    Example:

    const tooltip = document.querySelector("oc-tooltip-v1");
tooltip.recalcPosition();

API v2

Source: ./src/components/tooltip/v2/TooltipV2.API.g.mdx

Tooltip v2 API

API: <oc-tooltip-v2> (TooltipV2)

Global tooltip that attaches to any element via a data-oc-tooltip-v2 attribute, rather than being used as a component in markup directly.

Events
Event Detail type Description
oc-property-change OcTooltipV2Events["oc-property-change"] Whenever a property value changes, this event triggers. Use this event to track all property changes within the component.

Refer to the Events documentation for more information.
oc-mount { component: string; } Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
oc-unmount { component: string; } Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.
CSS custom properties
Custom property Default Description
--anchor Internal CSS anchor-positioning name linking the tooltip to its trigger element.

Variations (v2)

Source: ./src/components/tooltip/v2/Variations.mdx

Variations

Listed below are the most common variations of the tooltip component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-tooltip-variations--default · tags: components

Default usage: an explicit data-oc-tooltip-v2="..." value is used as the tooltip text.

Args: data-oc-tooltip-v2=This is the tooltip text

Use Aria Label

Story: components-tooltip-variations--use-aria-label · tags: components

When data-oc-tooltip-v2 is set without an explicit text value, the tooltip falls back to the element's computed accessible name (here via aria-label).

Args: aria-label=Info Icon, contents=["(i)", "(ii)", "(iii)"]

Read From Content

Story: components-tooltip-variations--read-from-content · tags: components

When data-oc-tooltip-v2 is set to an empty string (no explicit text and no aria-label), the tooltip falls back to reading the element's own text content as its accessible name.

Args: data-oc-tooltip-v2=``

Overflow

Story: components-tooltip-variations--overflow · tags: components

data-oc-tooltip-v2.overflow only shows the tooltip when the trigger's text is actually truncated. Resize the demo box to see the tooltip appear once the text overflows.

<button
  data-oc-tooltip-v2
  data-oc-tooltip-v2.overflow
  class="demo-overflow"
  style="width: fit-content"
>
  A short button label. No tooltip needed.
</button>
<button
  data-oc-tooltip-v2
  data-oc-tooltip-v2.overflow
  class="demo-overflow"
  style="width: 50%"
>
  A rather long button label that will get truncated. A rather long button label that will get
  truncated. A rather long button label that will get truncated. A rather long button label
  that will get truncated. Tooltip needed.
</button>
<style>
  .demo-overflow {
    display: block;
    padding: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    white-space: nowrap;
  }
</style>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Overflow",
  render() {
    return html`
      <button
        data-oc-tooltip-v2
        data-oc-tooltip-v2.overflow
        class="demo-overflow"
        style="width: fit-content"
      >
        A short button label. No tooltip needed.
      </button>
      <button
        data-oc-tooltip-v2
        data-oc-tooltip-v2.overflow
        class="demo-overflow"
        style="width: 50%"
      >
        A rather long button label that will get truncated. A rather long button label that will get
        truncated. A rather long button label that will get truncated. A rather long button label
        that will get truncated. Tooltip needed.
      </button>
      <style>
        .demo-overflow {
          display: block;
          padding: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          user-select: none;
          white-space: nowrap;
        }
      </style>
    `;
  }
}

Interaction tests (TooltipV2.interactions.stories.ts)

Interaction test stories (automated tests, not usage patterns).

Open Tooltip on Hover

Story: components-tooltip-interaction-tests--open-tooltip-on-hover · tags: play-fn

<button data-oc-tooltip-v2="Dieser Text sollte kopiert werden">Copy</button>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Open Tooltip on Hover",
  render() {
    return html`<button data-oc-tooltip-v2="Dieser Text sollte kopiert werden">Copy</button>`;
  },
  play: async ({
    canvasElement
  }) => {
    const trigger = canvasElement.querySelector("button")!;
    await userEvent.hover(trigger);
    await waitFor("tooltip visible", async () => {
      await expect(document.querySelector("oc-tooltip-v2")).toBeVisible();
    });
  }
}

Open Tooltip on Focus

Story: components-tooltip-interaction-tests--open-tooltip-on-focus · tags: play-fn

<button data-oc-tooltip-v2="Dieser Text sollte kopiert werden">Copy</button>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Open Tooltip on Focus",
  render() {
    return html`<button data-oc-tooltip-v2="Dieser Text sollte kopiert werden">Copy</button>`;
  },
  play: async ({
    canvasElement
  }) => {
    const trigger = canvasElement.querySelector("button")!;
    trigger.focus();
    await waitFor("trigger has focus", async () => {
      await expect(trigger).toHaveFocus();
    });
    await waitFor("tooltip visible", async () => {
      await expect(document.querySelector("oc-tooltip-v2")).toBeVisible();
    });
  }
}

Close Tooltip on Blur

Story: components-tooltip-interaction-tests--close-tooltip-on-blur · tags: play-fn

<button data-oc-tooltip-v2="Dieser Text sollte kopiert werden">Copy</button>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Close Tooltip on Blur",
  render() {
    return html`<button data-oc-tooltip-v2="Dieser Text sollte kopiert werden">Copy</button>`;
  },
  play: async ({
    canvasElement
  }) => {
    const trigger = canvasElement.querySelector("button")!;
    trigger.focus();
    await waitFor("tooltip visible", async () => {
      await expect(document.querySelector("oc-tooltip-v2")).toBeVisible();
    });
    trigger.blur();
    await macrotasks(100);
    await waitFor("tooltip removed", async () => {
      await expect(document.querySelector("oc-tooltip-v2")).not.toBeInTheDocument();
    });
  }
}

Overflow Gate Only Shows When Truncated

Story: components-tooltip-interaction-tests--shows-only-when-overflowing · tags: play-fn

<button
  data-oc-tooltip-v2
  data-oc-tooltip-v2.overflow
  style="display:block; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
>
  A rather long button label that will get truncated
</button>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Overflow Gate Only Shows When Truncated",
  render() {
    return html`
      <button
        data-oc-tooltip-v2
        data-oc-tooltip-v2.overflow
        style="display:block; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
      >
        A rather long button label that will get truncated
      </button>
    `;
  },
  play: async ({
    canvasElement
  }) => {
    const trigger = canvasElement.querySelector("button")!;
    await userEvent.hover(trigger);
    await waitFor("tooltip visible", async () => {
      await expect(document.querySelector("oc-tooltip-v2")).toBeVisible();
    });
  }
}

V1 (v1, deprecated, not for generation)

Source: ./src/components/tooltip/v1/Overview.mdx

Tooltip

The tooltip component provides customizable tooltips that can display additional information when hovering over or focusing on an element. It is stylable and supports adjustable positions and custom content.

Default variation

Story Default:

<oc-tooltip-v1 position="top">
  <div slot='tooltip-content'>Kopieren</div>
  <oc-icon-button-v3 icon='copy' oc-aria-label='Kopieren'></oc-icon-button-v3>
</oc-tooltip-v1>

Configuration

The tooltip is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the tooltip component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Tooltip UX documentation for detailed user experience guidelines.

Accessibility

The tooltip component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

ARIA attributes

The tooltip component itself does not need to be made accessible via aria-attributes, because its content cannot be accessed directly by screenreaders, it is just a visual element. It encloses an interactive main element such as a button or a link and an element that provides the tooltip content. Screenreaders can announce either the content of this main element that activates the tooltip, or the value that its aria-attribute holds.

To ensure clarity and accessibility, it's best practice to keep the information in the aria-label attribute of the interactive main element consistent with the tooltip-content of the tooltip, as only the main element is announced by screen readers.

Here's an example:

<!-- The Tooltip wrapper -->
<oc-tooltip-v1 position="top">
  <!-- The interactive main element holding info via `oc-aria-label` that is announced by screen readers -->
  <oc-icon-button-v3 icon="copy" oc-aria-label="Kopieren"></oc-icon-button-v3>
  <!-- The content of the Tooltip-->
  <div slot="tooltip-content">Kopieren</div>
</oc-tooltip-v1>
Keyboard navigation
Shortcut Description
Tab Focuses the interactive main element and opens tooltip
Esc Closes the tooltip when open
Blur/Unfocus Closes the tooltip after a short delay

The tooltip closes after a short delay when the focus is removed.

V1/Configuration (v1, deprecated, not for generation)

Source: ./src/components/tooltip/v1/Configuration.mdx

Tooltip configuration

Configure the tooltip component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Story Default:

<oc-tooltip-v1 position="top">
  <div slot='tooltip-content'>Kopieren</div>
  <oc-icon-button-v3 icon='copy' oc-aria-label='Kopieren'></oc-icon-button-v3>
</oc-tooltip-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

V1/Interaction tests (TooltipV1.interactions.stories.ts)

Interaction test stories (automated tests, not usage patterns).

Open Tooltip on Hover

Story: components-tooltip-v1-interaction-tests--open-tooltip-on-hover · tags: play-fn

Args: defaultSlot=<oc-icon-button-v3 icon='copy' oc-aria-label='Dieser Text sollte kopiert werden'></oc-icon-button-v3> , tooltipContentSlot=<div slot='tooltip-content'>Dieser Text sollte kopiert werden</div> , position=bottom

Story source (TypeScript, verbatim from Storybook)
{
  name: "Open Tooltip on Hover",
  args: {
    defaultSlot: "<oc-icon-button-v3 icon='copy' oc-aria-label='Dieser Text sollte kopiert werden'></oc-icon-button-v3> ",
    tooltipContentSlot: `<div slot='tooltip-content'>Dieser Text sollte kopiert werden</div>
    `,
    position: "bottom"
  },
  play: async ({
    canvasElement
  }) => {
    const tooltipElement = canvasElement.getElementsByTagName("oc-tooltip-v1")[0]!;
    const tooltipActivator = tooltipElement?.querySelector("oc-icon-button-v3");
    await userEvent.hover(tooltipActivator as Element);
    await waitFor("tooltip visible", async () => {
      await expect(tooltipElement.shadowRoot?.querySelector("oc-popover-v1")?.shadowRoot?.querySelector(".popover-popover")).toHaveClass("visible");
    });
  }
}

Open Tooltip on Focus

Story: components-tooltip-v1-interaction-tests--open-tooltip-on-focus · tags: play-fn

Args: defaultSlot=<oc-icon-button-v3 icon='copy' oc-aria-label='Dieser Text sollte kopiert werden'></oc-icon-button-v3> , tooltipContentSlot=<div slot='tooltip-content'><div slot='tooltip-content'>Dieser Text sollte kopiert werden</div></div> , position=bottom

Story source (TypeScript, verbatim from Storybook)
{
  name: "Open Tooltip on Focus",
  args: {
    defaultSlot: "<oc-icon-button-v3 icon='copy' oc-aria-label='Dieser Text sollte kopiert werden'></oc-icon-button-v3> ",
    tooltipContentSlot: `<div slot='tooltip-content'><div slot='tooltip-content'>Dieser Text sollte kopiert werden</div></div>
    `,
    position: "bottom"
  },
  play: async ({
    canvasElement
  }) => {
    const tooltipElement = canvasElement.getElementsByTagName("oc-tooltip-v1")[0]!;
    const tooltipActivator = tooltipElement.querySelector("oc-icon-button-v3")!;
    tooltipActivator.focus();
    await waitFor("tooltip has focus", async () => {
      await expect(tooltipActivator).toHaveFocus();
    });
    await waitFor("tooltip visible", async () => {
      await expect(tooltipElement.shadowRoot?.querySelector("oc-popover-v1")?.shadowRoot?.querySelector(".popover-popover")).toHaveClass("visible");
    });
  }
}

V1/Variations (v1, deprecated, not for generation)

Source: ./src/components/tooltip/v1/Variations.mdx

Variations

Listed below are the most common variations of the tooltip component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-tooltip-v1-variations--default · tags: components

The default configuration uses an in the default slot and position=top.

Args: defaultSlot=<oc-icon-button-v3 icon='copy' oc-aria-label='Kopieren'></oc-icon-button-v3> , tooltipContentSlot=<div slot='tooltip-content'>Kopieren</div>, position=top

<oc-tooltip-v1 position="top">
  <div slot='tooltip-content'>Kopieren</div>
  <oc-icon-button-v3 icon='copy' oc-aria-label='Kopieren'></oc-icon-button-v3>
</oc-tooltip-v1>

Demo: different content, positions, and styles

Story: components-tooltip-v1-variations--demo · tags: components

A demo of the tooltip component with different content, positions, and styles.

<style>
  .parent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    justify-items: start;
    align-items: center;
  }
</style>
<br />
<div class="parent">
  <oc-tooltip-v1
    ><oc-icon-button-v3
      icon="info"
      oc-aria-label="Weitere Informationen."
    ></oc-icon-button-v3>
    <div slot="tooltip-content">Weitere Informationen.</div>
  </oc-tooltip-v1>
  <oc-tooltip-v1 position="top"
    ><oc-icon-button-v3
      icon="fitness"
      oc-aria-label="Der Tooltip content kann gestyled werden."
    ></oc-icon-button-v3>
    <div slot="tooltip-content">
      Der <i>Content</i> im <span style="font-weight: bold">Tooltip</span> kann
      <span style="color: red">gestyled</span> werden!
    </div>
  </oc-tooltip-v1>
  <oc-tooltip-v1 position="top">
    <div
      style="display: flex; align-items: center; color: var(--oc-semantic-color-text-interactive)"
    >
      <oc-icon-v1 type="rating-filled" size="100"></oc-icon-v1>
      <oc-icon-v1 type="rating-filled" size="100"></oc-icon-v1>
      <oc-icon-v1 type="rating-filled" size="100"></oc-icon-v1>
      <oc-icon-v1 type="rating-filled" size="100"></oc-icon-v1>
      <oc-icon-v1 type="rating-half" size="100"></oc-icon-v1>
      (1337)
    </div>
    <div slot="tooltip-content">
      4.5 von 5 Sternen (1337 Bewertungen) <br />
      <span>90% Positiv</span>
    </div>
  </oc-tooltip-v1>
  <oc-tooltip-v1
    ><div style="border: 1px dashed green">Multiline<br />Content</div>
    <div slot="tooltip-content">Weitere Informationen.</div>
  </oc-tooltip-v1>
  <oc-tooltip-v1 position="top"
    ><div style="border: 1px dashed green">
      Very long multiline<br />content lorem ipsum dolor sit amet.
    </div>
    <div slot="tooltip-content">Weitere Informationen.</div>
  </oc-tooltip-v1>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Demo: different content, positions, and styles",
  argTypes: hideControlsBadge(Metadata),
  parameters: {
    controls: {
      disabled: true
    },
    docs: {
      story: {
        inline: false,
        iframeHeight: "200px"
      }
    }
  },
  render() {
    return html`
      <style>
        .parent {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 40px;
          justify-items: start;
          align-items: center;
        }
      </style>
      <br />
      <div class="parent">
        <oc-tooltip-v1
          ><oc-icon-button-v3
            icon="info"
            oc-aria-label="Weitere Informationen."
          ></oc-icon-button-v3>
          <div slot="tooltip-content">Weitere Informationen.</div>
        </oc-tooltip-v1>
        <oc-tooltip-v1 position="top"
          ><oc-icon-button-v3
            icon="fitness"
            oc-aria-label="Der Tooltip content kann gestyled werden."
          ></oc-icon-button-v3>
          <div slot="tooltip-content">
            Der <i>Content</i> im <span style="font-weight: bold">Tooltip</span> kann
            <span style="color: red">gestyled</span> werden!
          </div>
        </oc-tooltip-v1>
        <oc-tooltip-v1 position="top">
          <div
            style="display: flex; align-items: center; color: var(--oc-semantic-color-text-interactive)"
          >
            <oc-icon-v1 type="rating-filled" size="100"></oc-icon-v1>
            <oc-icon-v1 type="rating-filled" size="100"></oc-icon-v1>
            <oc-icon-v1 type="rating-filled" size="100"></oc-icon-v1>
            <oc-icon-v1 type="rating-filled" size="100"></oc-icon-v1>
            <oc-icon-v1 type="rating-half" size="100"></oc-icon-v1>
            (1337)
          </div>
          <div slot="tooltip-content">
            4.5 von 5 Sternen (1337 Bewertungen) <br />
            <span>90% Positiv</span>
          </div>
        </oc-tooltip-v1>
        <oc-tooltip-v1
          ><div style="border: 1px dashed green">Multiline<br />Content</div>
          <div slot="tooltip-content">Weitere Informationen.</div>
        </oc-tooltip-v1>
        <oc-tooltip-v1 position="top"
          ><div style="border: 1px dashed green">
            Very long multiline<br />content lorem ipsum dolor sit amet.
          </div>
          <div slot="tooltip-content">Weitere Informationen.</div>
        </oc-tooltip-v1>
      </div>
    `;
  }
}