easyUI 鼠标悬停显示内容

最新推荐文章于 2024-07-19 13:00:00 发布

有魔力的豆角

最新推荐文章于 2024-07-19 13:00:00 发布

阅读量8.2k

点赞数 1

分类专栏： easy-ui

本文链接：https://blog.csdn.net/culous/article/details/79030130

版权

本文介绍了easyUI中如何利用鼠标悬停（Tooltip）展示元素的额外信息，包括如何通过添加'easyui-tooltip'类创建提示框，以及提示内容可以包含HTML元素和通过ajax动态生成。

摘要由CSDN通过智能技术生成

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

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


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

2、使用 javascript 创建提示框（Tooltip）。

    $('#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'
    		})