spz-tooltip 文字提示

简单的文字提示气泡框。

布局

logic

何时使用

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

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

代码演示

基本用法

最简单的用法。

Tooltip will show on mouse enter.

<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 内第一个子元素的内容，必须只有一个根元素。

Custom content

<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	可以触发行为的元素ID	string	-	是
content	提示内容	string	-	是，除非元素内部有子元素
interact	触发行为，可选 `click` \| `hover`	string	`hover`	否
placement	气泡框位置，可选 `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight`	string	`top`	否
overlay-class	将自定义类加入到 Tooltip 的根元素	string	-	否
open-delay	鼠标移入后延时多少才显示 Tooltip，单位秒	number	`0.1`	否
close-delay	鼠标移出后延时多少才显示 Tooltip，单位秒	number	`0.1`	否
no-arrow	如果属性存在，不展示箭头	-	-	否

方法

close

关闭 Tooltip，不需要参数。