代码演示

基本形式

文字提示 tooltip - 图1

  1. <tooltip tip="基本的tooltip"><ui.button title="鼠标放上去,可以看到提示" /></tooltip>
  1. var component = new NEKUI.Component({
    template: template
    });

位置

文字提示 tooltip - 图2

  1. <div class="g-row">
    <tooltip tip="tooltip箭头的位置在中间" placement="top"><ui.button title="top" /></tooltip>
    <tooltip tip="tooltip箭头的位置在左边" placement="topLeft"><ui.button title="topLeft" /></tooltip>
    <tooltip tip="tooltip箭头的位置在右边" placement="topRight"><ui.button title="topRight" /></tooltip>
    </div>
    <div class="g-row">
    <tooltip tip="tooltip箭头的位置在中间" placement="left"><ui.button title="left" /></tooltip>
    <tooltip tip="tooltip箭头的位置在上边" placement="leftTop"><ui.button title="leftTop" /></tooltip>
    <tooltip tip="tooltip箭头的位置在下边" placement="leftBottom"><ui.button title="leftBottom" /></tooltip>
    </div>
    <div class="g-row">
    <tooltip tip="tooltip箭头的位置在中间" placement="right"><ui.button title="right" /></tooltip>
    <tooltip tip="tooltip箭头的位置在上边" placement="rightTop"><ui.button title="rightTop" /></tooltip>
    <tooltip tip="tooltip箭头的位置在下边" placement="rightBottom"><ui.button title="rightBottom" /></tooltip>
    </div>
    <div class="g-row">
    <tooltip tip="tooltip箭头的位置在中间" placement="bottom"><ui.button title="bottom" /></tooltip>
    <tooltip tip="tooltip箭头的位置在左边" placement="bottomLeft"><ui.button title="bottomLeft" /></tooltip>
    <tooltip tip="tooltip箭头的位置在右边" placement="bottomRight"><ui.button title="bottomRight" /></tooltip>
    </div>
  1. var component = new NEKUI.Component({
    template: template
    });

API

Tooltip

Kind: global classExtend: Component

new Tooltip()

ParamTypeDefaultDescription
[options.data]object= 绑定属性
[options.data.tip]string=> 文字提示
[options.data.placement]string"top"=> tips展示出的位置:top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom