Nhảy tới nội dung

tooltip

Cập nhật lần cuối vào
  • tooltip là component trong tini-ui là thành phẩn nhỏ gọn hiển thị nội dung dưới dạng như mẹo, gợi ý hoặc thủ thuật.
  • Để sử dụng tooltip, bạn cần phải cài tini-ui từ version 0.2.1 trở lên.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Cài đặt tini-ui:

$> yarn add @tiki.vn/tini-ui

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
classNamestring''Custom class cho tooltip
stylestring''Style cho tooltip
contentstring''Text content của tooltip
showbooleanfalseNếu set true tooltip sẽ được show
theme'reverse' | 'default''default'Theme của tooltip
position'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | 'bottom-left' | 'bottom-right''top'Vị trí hiển thị của tooltip
showCloseIconbooleanfalseNếu set true icon-close tooltip sẽ được show
iconSizeClosenumber16size của icon-close tooltip

slots

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
contentbooleanprops.contentRender component ở nội dung content tip
operationboolean''Render component ở phần hiển thị tip

Sample Code

index.json
{
"defaultTitle": "Tooltip",
"usingComponents": {
"tooltip": "@tiki.vn/tini-ui/es/tooltip/index"
}
}

index.txml
<view class="wrapper">
<tooltip class="mt-48" position="top" show theme="reverse">
<view slot="content">
Top
</view>
<view slot="operation">Text</view>
</tooltip>

<tooltip class="mt-48" position="top-left" show theme="reverse">
<view slot="content">
Top Left
</view>
<view slot="operation">Text</view>
</tooltip>

<tooltip class="mt-48" position="top-right" show theme="reverse">
<view slot="content">
Top Left
</view>
<view slot="operation">Text</view>
</tooltip>

<tooltip class="mt-48" position="left" show theme="reverse">
<view slot="content">
Left
</view>
<view slot="operation">Text</view>
</tooltip>

<tooltip class="mt-48" position="left-top" show theme="reverse">
<view slot="content">
Left Top
</view>
<view slot="operation">Text</view>
</tooltip>

<tooltip class="mt-48" position="left-bottom" show theme="reverse">
<view slot="content">
Left Bottom
</view>
<view slot="operation">Text</view>
</tooltip>

<tooltip class="mt-48" position="right" show theme="reverse">
<view slot="content">
Right
</view>
<view slot="operation">Text</view>
</tooltip>

<tooltip class="mt-48" position="right-top" show theme="reverse">
<view slot="content">
Right Top
</view>
<view slot="operation">Text</view>
</tooltip>

<tooltip class="mt-48" position="right-bottom" show theme="reverse">
<view slot="content">
Right Top
</view>
<view slot="operation">Text</view>
</tooltip>

<tooltip class="mt-48" position="bottom" show theme="reverse">
<view slot="content">
Bottom
</view>
<view slot="operation">Text</view>
</tooltip>

<tooltip class="mt-48" position="bottom-left" show theme="reverse">
<view slot="content">
Bottom Left
</view>
<view slot="operation">Text</view>
</tooltip>

<tooltip class="mt-48" position="bottom-right" show theme="reverse">
<view slot="content">
Bottom Left
</view>
<view slot="operation">Text</view>
</tooltip>

</view>
index.js
Page({
onClose(event) {
console.log('onClose tip', event);
}
});