文字提示 KLTooltip

基本形式

文字提示 KLTooltip - 图1

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

位置

文字提示 KLTooltip - 图2

  1. <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>
  1. var component = new NEKUI.Component({
    template: template
    });

API

KLTooltip

KLTooltip

ParamTypeDefaultDescription
[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