文字提示 KLTooltip

基本形式

文字提示 KLTooltip - 图1

<kl-tooltip tip="基本的tooltip">
    <kl-button title="鼠标放上去,可以看到提示" />
</kl-tooltip>

var component = new NEKUI.Component({
    template: template
});

位置

文字提示 KLTooltip - 图2

<div class="g-row">
    <kl-tooltip tip="tooltip箭头的位置在中间" placement="top"><kl-button title="top" /></kl-tooltip>
    <kl-tooltip tip="tooltip箭头的位置在左边" placement="topLeft"><kl-button title="topLeft" /></kl-tooltip>
    <kl-tooltip tip="tooltip箭头的位置在右边" placement="topRight"><kl-button title="topRight" /></kl-tooltip>
</div>
<div class="g-row">
    <kl-tooltip tip="tooltip箭头的位置在中间" placement="left"><kl-button title="left" /></kl-tooltip>
    <kl-tooltip tip="tooltip箭头的位置在上边" placement="leftTop"><kl-button title="leftTop" /></kl-tooltip>
    <kl-tooltip tip="tooltip箭头的位置在下边" placement="leftBottom"><kl-button title="leftBottom" /></kl-tooltip>
</div>
<div class="g-row">
    <kl-tooltip tip="tooltip箭头的位置在中间" placement="right"><kl-button title="right" /></kl-tooltip>
    <kl-tooltip tip="tooltip箭头的位置在上边" placement="rightTop"><kl-button title="rightTop" /></kl-tooltip>
    <kl-tooltip tip="tooltip箭头的位置在下边" placement="rightBottom"><kl-button title="rightBottom" /></kl-tooltip>
</div>
<div class="g-row">
    <kl-tooltip tip="tooltip箭头的位置在中间" placement="bottom"><kl-button title="bottom" /></kl-tooltip>
    <kl-tooltip tip="tooltip箭头的位置在左边" placement="bottomLeft"><kl-button title="bottomLeft" /></kl-tooltip>
    <kl-tooltip tip="tooltip箭头的位置在右边" placement="bottomRight"><kl-button title="bottomRight" /></kl-tooltip>
</div>

var component = new NEKUI.Component({
    template: template
});

API

KLTooltip

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.tip]	`string`		=> 文字提示
[options.data.class]	`string`		=> 增加class
[options.data.placement]	`string`	`"top"`	=> tips展示出的位置：top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom