Cuttlefish Docs
  • English

    • spz-tooltip

    Supported layouts: logic

    When to Use

    Can be used to replace the system's default title tooltip.

    • Tooltip shows when the mouse enters and disappears when it leaves.
    • Tooltip shows on mouse click.

    Code Demonstration

    Basic Usage

    The simplest usage.

    <div id="simple-text">Tooltip will show on mouse enter.</div>
<spz-tooltip layout="logic" for="simple-text" content="tooltip text"></spz-tooltip>

    Position

    There are 6 directions for the position.

    <div class="position">
  <div>
    <div id="tooltip-top-left">TL</div>
    <div id="tooltip-top">Top</div>
    <div id="tooltip-top-right">TR</div>
  </div>
  <div>
    <div id="tooltip-bottom-left">BL</div>
    <div id="tooltip-bottom">Bottom</div>
    <div id="tooltip-bottom-right">BR</div>
  </div>
</div>

<spz-tooltip layout="logic" for="tooltip-top-left" content="tooltip text" placement="topLeft"></spz-tooltip>
<spz-tooltip layout="logic" for="tooltip-top" content="tooltip text" placement="top"></spz-tooltip>
<spz-tooltip layout="logic" for="tooltip-top-right" content="tooltip text" placement="topRight"></spz-tooltip>
<spz-tooltip layout="logic" for="tooltip-bottom-left" content="tooltip text" placement="bottomLeft"></spz-tooltip>
<spz-tooltip layout="logic" for="tooltip-bottom" content="tooltip text" placement="bottom"></spz-tooltip>
<spz-tooltip layout="logic" for="tooltip-bottom-right" content="tooltip text" placement="bottomRight"></spz-tooltip>

    Custom Tooltip Content

    When the content attribute is not configured, it will look for the content of the first child element inside spz-tooltip, which must have only one root element.

    <div id="custom-content">Custom content</div>

<spz-tooltip layout="logic" id="custom-content-tooltip" for="custom-content" overlay-class="custom-tooltip-content" no-arrow placement="topLeft">
  <ul>
    <li @tap="custom-content-tooltip.close;">Black / S</li>
    <li @tap="custom-content-tooltip.close;">Black / M</li>
    <li @tap="custom-content-tooltip.close;">Black / L</li>
  </ul>
</spz-tooltip>

    Properties

    Property NameDescriptionTypeDefault ValueRequired
    forID of the element that can trigger the actionstring-Yes
    contentTooltip contentstring-Yes, unless there are child elements inside
    interactTrigger action, optional click | hoverstringhoverNo
    placementTooltip position, optional top | topLeft | topRight | bottom | bottomLeft | bottomRightstringtopNo
    overlay-classAdd a custom class to the root element of the Tooltipstring-No
    open-delayDelay in seconds before showing the Tooltip after the mouse entersnumber0.1No
    close-delayDelay in seconds before hiding the Tooltip after the mouse leavesnumber0.1No
    no-arrowIf this attribute exists, do not display an arrow--No

    Methods

    close

    Close the Tooltip, no parameters needed.

    AI Summary (LLM Ready)

    • Component ID: spz-tooltip
    • One-line purpose: Simple text tooltip bubble.
    • Detected attribute rows: 0
    • Detected method subsections: 1
    • Detected event subsections: 0
    • Top attribute names: none (needs manual completion)
    • Top method names: close
    • Top event names: none (needs manual completion)
    • Reading order: start from usage/examples, then verify attributes, methods, and events.
    • Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/