easy

DocsVersion : 0.1.0

Tooltip 工具提示组件

Define in : tooltip.js

该组件对元素拥有的原生的 title 属性的 tip 表现形式进行了优化和增强,并且支持更多事件的触发,mouseenter、focus、click等都可以触发。可以自定义工具提示出现的方位,并且支持优雅的动画效果。

Tooltip( target, [ options ] )

依赖
JS : 不依赖
CSS : 依赖样式
HTML : 固定
参数
  • target
    String|
    Element|
    easyJS Object
    必需

    target 可以是选择器字符串、DOM 元素,也可以是 easyJS Object,可以对一组元素进行工具提示的绑定。

  • options
    Object
    可选

    多选形式的可配置参数。

下表列出多选可配置形式的参数的详细说明。

参数 数据类型 默认值 说明
content String null

工具提示的内容,可以是 html 字符串。如果没有该参数,将从元素的 title 属性中取。

duration Number 200

动画的运行时间,仅在 effects 参数不为 null 时才有效。

easing String swing

动画的缓动函数名称,仅在 effects 参数不为 null 时才有效。

effects String null

动画效果的名称。

fade 淡入淡出。

slide 滑动效果。

maxWidth Number 200

工具提示显示的最大宽度。

position String top

工具提示相对于触发元素显示的方位。

top 上。

right 右。

bottom 下。

left 左。

space Number 12

工具提示距离触发元素的间距。

trigger String click

触发选项卡切换的事件,支持自定义事件。

mouseenter 悬停显示。

focus 获取焦点显示。

click 点击切换。

unClose Boolean false

通过 mouseenter、focus 事件触发显示的工具提示在 mouseleave、blur 时会自动关闭,如果想关闭自动关闭的功能,可以设置该参数为 true,此时将在工具提示中显示一个关闭按钮。

zIndex Number 9900

工具提示的定位层级,多个工具提示同时显示时,后显示的层级会更高。

方法
  • destroy

    销毁工具提示实例。

  • on

    对工具提示实例绑定事件,该方法接受2个参数,第一个参数是事件类型,第二个参数是事件处理器,返回实例便于链式调用。

  • un

    卸载工具提示实例的事件。该方法接受1个事件类型的参数。返回实例便于链式调用。

下表列出了支持的事件类型。

事件类型 说明 事件对象
open

工具提示显示时触发的事件。

event.target 触发显示的元素。

close

工具提示关闭时触发的事件。

event.target 触发关闭的元素。

在使用 Tooltip 组件前,对其进行加载。

E.use( 'tooltip', function(){
    // 在回调中实例化工具提示
});

工具提示组件需要依赖样式。

.eui_tooltip{ position:absolute; display:none; }
.eui_tooltip .tt_wrapper{ position:relative; padding:6px 10px; background:#2a2a2a; color:#fff; font-size:12px; line-height:18px; }
.eui_tooltip .tt_btn_close{ position:absolute; right:6px; top:6px; color:#fff; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:17px; font-weight:700; text-decoration:none; width:16px; height:16px; line-height:16px; text-align:center; display:block; }
.eui_tooltip .tt_arrow{ position:absolute; border:6px solid transparent; width:0px; height:0px; line-height:0px; display:block; }
.eui_tooltip .tt_arrow_bottom{ border-bottom-color:#2a2a2a; top:-12px; left:50%; margin-left:-6px; }
.eui_tooltip .tt_arrow_top{ border-top-color:#2a2a2a; bottom:-12px; left:50%; margin-left:-6px; }
.eui_tooltip .tt_arrow_right{ border-right-color:#2a2a2a; top:50%; left:-12px; margin-top:-6px; }
.eui_tooltip .tt_arrow_left{ border-left-color:#2a2a2a; top:50%; right:-12px; margin-top:-6px; }
例子1

为下面的链接添加工具提示。

通过使用 Windows DefenderWindows 防火墙等功能、安装重要更新和备份文件,有助于使你的电脑更安全。

new E.ui.Tooltip( '#demoPara a' );
例子2

为下面的按钮添加工具提示,设置工具提示在按钮左边显示,并通过参数传递内容。

click

new E.ui.Tooltip( '#runDemo1', {
    position : 'left',
    trigger : 'click',
    content : '<b>点击</b>触发'
});