jQuery EasyUI 基础插件 - Tooltip 提示框

jQuery EasyUI 教程 · 2019-04-07 12:58:11

通过 $.fn.tooltip.defaults 重写默认的 defaults。

当用户移动鼠标指针在某个元素上时,出现提示信息窗口用来显示额外信息。提示内容可以包含任何来自页面的或者通过 ajax 生成的 html 元素。

用法

创建提示框(Tooltip)

1、从标记创建提示框(Tooltip),添加 'easyui-tooltip' class 到元素,不需要任何的 javascript 代码。

<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

2、使用 javascript 创建提示框(Tooltip)。

<a id="dd" href="javascript:void(0)">Click here</a>
$('#dd').tooltip({
    position: 'right',
    content: '<span style="color:#fff">This is the tooltip message.</span>',
    onShow: function(){
        $(this).tooltip('tip').css({
            backgroundColor: '#666',
            borderColor: '#666'
        });
    }
});

属性

名称 类型 描述 默认值
position string 提示框(tooltip)位置。可能的值:'left'、'right'、'top'、'bottom'。 bottom
content string 提示框(tooltip)内容。 null
trackMouse boolean 如果设置为 true,提示框(tooltip)会随着鼠标移动。 false
deltaX number 提示框(tooltip)位置的水平距离。 0
deltaY number 提示框(tooltip)位置的垂直距离。 0
showEvent string 引发提示框(tooltip)出现的事件。 mouseenter
hideEvent string 引发提示框(tooltip)消失的事件。 mouseleave
showDelay number 显示提示框(tooltip)的时间延迟。 200
hideDelay number 隐藏提示框(tooltip)的时间延迟。 100

事件

名称 参数 描述
onShow e 当显示提示框(tooltip)时触发。
onHide e 当隐藏提示框(tooltip)时触发。
onUpdate content 当提示框(tooltip)内容更新时触发。
onPosition left,top 当提示框(tooltip)位置改变时触发。
onDestroy none 当提示框(tooltip)销毁时触发。

方法

名称 参数 描述
options none 返回选项(options)属性(property)。
tip none 返回提示(tip)对象。
arrow none 返回箭头(arrow)对象。
show e 显示提示框(tooltip)。
hide e 隐藏提示框(tooltip)。
update content 更新提示框(tooltip)内容。
reposition none 重置提示框(tooltip)位置。
destroy none 销毁提示框(tooltip)。

点击查看所有 jQuery EasyUI 教程 文章: https://www.codercto.com/courses/l/42.html

查看所有标签

区块链:定义未来金融与经济新格局

区块链:定义未来金融与经济新格局

张健 / 机械工业出版社 / 2016-6-18 / 49.00

从构建价值互联网的角度看,区块链的出现意味着从0到1。正因如此,本书章节结构与常见的体例不同,从第0章开始。第0章从文字与货币的起源出发,通过论述人类信息传递和价值传输手段的进步,说明区块链技术诞生的必然性。第1章用深入浅出的语言讲解区块链的本质、运行原理、颠覆性潜力以及区块链技术的现状与未来;第2章宏观讲述了区块链技术带来的新产品和新机遇,包括数字货币、互联网金融、物联网,以及新一代的基础设施;......一起来看看 《区块链:定义未来金融与经济新格局》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具