【EasyUI篇】Tooltip提示框组件-CFANZ编程社区

微信公众号：程序yuan

4.Tooltip提示框组件

【EasyUI篇】Tooltip提示框组件_EasyUI

【EasyUI篇】Tooltip提示框组件_EasyUI_02

【EasyUI篇】Tooltip提示框组件_css_03

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Droppable</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/Tooltip.js"></script>
    <style rel="stylesheet" type="text/css">
    </style>
</head>
<body style="margin-left: 200px; margin-top: 200px;">

    <%----%>
    <%--<a href="http://www.baidu.com" title="这是一个提示信息！" class="easyui-tooltip">
        HOVER ME
    </a>--%>
    <a href="#" id="box">
        HOVER ME
    </a>
    <br><br><br>
    <button id="showBtn">点击显示提示框</button>
    <button id="hideBtn">点击隐藏提示框</button>
    <button id="destroyBtn">点击销毁提示框</button>
    <button id="repositionBtn">点击改变提示框位置</button>
    <button id="updateBtn">点击改变提示框内容</button>

</body>
</html>

JS文件

$(function () {

    $('#box').tooltip({
//------------- 属性列表 ------------------
        content:"这是可以输入提示内容",
        // position:'top',//bottom(default),left,top,right
        //设置允许提示框跟随鼠标移动,默认为false
        // trackMouse:true,
        //设置提示框距离鼠标的位置
        // deltaX:40,
        // deltaY:20,
        //鼠标进入时显示
        // showEvent:'mouseenter',
        //单击时显示
        // showEvent:'click',
        //鼠标离开时隐藏
        // hideEvent:'mouseleave'
        //双击时隐藏
        // hideEvent:'dblclick',
        //设置延时多少秒显示提示框
        showDelay:200,
        //设置延时多少秒隐藏提示框
        hideDelay:200,

//------------- 事件列表 ---------------
        onShow:function (e) {
            // alert("在显示提示框时触发");
            //返回tip对象。需要tip元素生成之后
            // console.log($('#box').tooltip('tip'));
            //返回箭头元素对象
            $('.tooltip-bottom').css('left',300);
            console.log($('#box').tooltip('arrow'));
        },
        onHide:function (e) {
            // alert("在隐藏提示框时触发");
        },
        onUpdate:function (content) {
            alert("在内容更新时触发，content："+content);
        },
        onPosition: function (left,top) {
            alert("在改变位置时触发：left:"+left+",top:"+top);
        },
        onDestroy:function (none) {
            alert("在提示框销毁时触发");
        }

    });

//-------------- 方法列表 -------------------
    //返回属性对象
    console.log($('#box').tooltip('options'));

    $('#showBtn').click(function () {
        $('#box').tooltip('show');
    });
    $('#hideBtn').click(function () {
        $('#box').tooltip('hide');
    });
    $('#destroyBtn').click(function () {
        $('#box').tooltip('destroy');
    });
    $('#repositionBtn').click(function () {
        //重置提示框位置
        $('#box').tooltip('reposition');
    });
    $('#updateBtn').click(function () {
        $('#box').tooltip('update','内容改变了');
    });


});

效果图

【EasyUI篇】Tooltip提示框组件_ide_04

------------------------------------------------

【EasyUI篇】Tooltip提示框组件_提示框_05