Cuttlefish Docs
  • 简体中文

    • spz-tooltip 文字提示

    支持布局: logic

    何时使用

    可用来代替系统默认的 title 提示。

    • 鼠标移入则显示提示，移出消失。
    • 鼠标点击则显示提示。

    代码演示

    基本用法

    最简单的用法。

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

    位置

    位置有6个方向。

    <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>

    自定义提示内容

    当没有配置 content 属性时，会去找 spz-tooltip 内第一个子元素的内容，必须只有一个根元素。

    <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>

    属性

    属性名说明类型默认值是否必需
    for可以触发行为的元素IDstring-是
    content提示内容string-是，除非元素内部有子元素
    interact触发行为，可选 click | hoverstringhover否
    placement气泡框位置，可选 top | topLeft | topRight | bottom | bottomLeft | bottomRightstringtop否
    overlay-class将自定义类加入到 Tooltip 的根元素string-否
    open-delay鼠标移入后延时多少才显示 Tooltip，单位秒number0.1否
    close-delay鼠标移出后延时多少才显示 Tooltip，单位秒number0.1否
    no-arrow如果属性存在，不展示箭头--否

    方法

    close

    关闭 Tooltip，不需要参数。

    事件

    open

    当提示显示时自动触发。

    close

    当提示隐藏时自动触发。

    AI 摘要（LLM Ready）

    • 组件标识：spz-tooltip
    • 用途一句话：简单的文字提示气泡框。
    • 可识别属性条目：8
    • 可识别方法小节：1
    • 可识别事件小节：2
    • 关键属性名（Top）：for、content、interact、placement、overlay-class、open-delay
    • 关键方法名（Top）：close
    • 关键事件名（Top）：open、close
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/