OnionlUI

Appearance

Tooltip 文字提示 ​

当鼠标悬停或点击在元素上时，显示提示信息（如果你觉得这个组件长得很像 Popover，恭喜你答对了，Tooltip 是 Popover 封装出来的😁）。

基础用法 ​

最基础的文字提示。

在 github 中打开
展开代码
复制代码
<template>
  <div class="flex flex-col p-x-5 p-y-3 gap-4">
    <div class="flex gap-2 justify-center items-center">
      <ol-tooltip content="Hello, 我在顶部" placement="top-start" trigger="hover">
        <ol-button type="primary">
          Top Start
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, 我在顶部" placement="top" trigger="hover">
        <ol-button type="primary">
          Top
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, 我在顶部" placement="top-end" trigger="hover">
        <ol-button type="primary">
          Top End
        </ol-button>
      </ol-tooltip>
    </div>
    <div class="flex justify-around items-center">
      <ol-tooltip content="Hello, 我在左边" placement="left-start" trigger="hover">
        <ol-button type="primary">
          left Start
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, 我在右边" placement="right-start" trigger="hover">
        <ol-button type="primary">
          Right Start
        </ol-button>
      </ol-tooltip>
    </div>
    <div class="flex justify-around items-center">
      <ol-tooltip content="Hello, 我在左边" placement="left" trigger="hover">
        <ol-button type="primary">
          left Center
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, 我在右边" placement="right" trigger="hover">
        <ol-button type="primary">
          Right Center
        </ol-button>
      </ol-tooltip>
    </div>

    <div class="flex justify-around items-center">
      <ol-tooltip content="Hello, 我在左边" placement="left-end" trigger="hover">
        <ol-button type="primary">
          left End
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, 我在右边" placement="right-end" trigger="hover">
        <ol-button type="primary">
          Right End
        </ol-button>
      </ol-tooltip>
    </div>
    <div class="flex gap-2 justify-center items-center">
      <ol-tooltip content="Hello, 我在底部" placement="bottom-start" trigger="hover">
        <ol-button type="primary">
          Bottom Start
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, 我在底部" placement="bottom" trigger="hover">
        <ol-button type="primary">
          Bottom
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, 我在底部" placement="bottom-end" trigger="hover">
        <ol-button type="primary">
          Bottom End
        </ol-button>
      </ol-tooltip>
    </div>
  </div>
</template>

触发方式 ​

通过 trigger 属性可以设置不同的触发方式。

在 github 中打开
展开代码
复制代码
<template>
  <div class="flex gap-2">
    <ol-tooltip content="hover 触发">
      <ol-button>hover 触发</ol-button>
    </ol-tooltip>
    <ol-tooltip content="click 触发" trigger="click">
      <ol-button>click 触发</ol-button>
    </ol-tooltip>
  </div>
</template>

提示框样式 ​

通过 content-class 属性可以设置提示框的样式。

在 github 中打开
展开代码
复制代码
<template>
  <ol-tooltip content-class="w-sm z-2000" trigger="click" content="To infinity and beyond🚀">
    <ol-button>Click 触发</ol-button>
  </ol-tooltip>
</template>

箭头 ​

通过 arrow 属性可以设置是否显示箭头。

在 github 中打开
展开代码
复制代码
<template>
  <ol-tooltip :arrow="false" trigger="click" content="To infinity and beyond🚀">
    <ol-button>没有箭头</ol-button>
  </ol-tooltip>
</template>

属性 ​

属性名说明类型默认值
content-class内容类名string-
content显示的内容string-
placement提示框出现的位置top | bottom | left | right | toptop
trigger触发方式hover | click | hoverhover
arrow是否显示箭头booleantrue

插槽 ​

插槽名说明
default触发 Tooltip 显示的元素