Latest web development tutorials
×

jQuery EasyUI Tutorial

jQuery EasyUI Tutorial jQuery EasyUI Introduction

jEasyUI application

jEasyUI Create a CRUD application jEasyUI Create a CRUD data grid jEasyUI Form CRUD application jEasyUI Create an RSS reader

jEasyUI Drag and drop

jEasyUI Basic drag and drop jEasyUI Create a drag-and-drop shopping cart jEasyUI Create a school curriculum

jEasyUI Menus and buttons

jEasyUI Create a simple menu jEasyUI Create a link button jEasyUI Create a menu button jEasyUI Create a split button

jEasyUI layout

jEasyUI Create a border layout jEasyUI Create a complex layout jEasyUI Creates a fold panel jEasyUI Create a tab page jEasyUI Dynamically add a tab jEasyUI Add the AutoPlay tab jEasyUI Create the XP style left panel

jEasyUI Data grid

jEasyUI Convert HTML tables to data grids jEasyUI Get the selected row data jEasyUI Add the query function jEasyUI Add a toolbar jEasyUI Create complex toolbars jEasyUI Sets the frozen column jEasyUI Dynamically change columns jEasyUI Format the column jEasyUI Set sort jEasyUI Custom sorting jEasyUI Create a column combination jEasyUI Add a check box jEasyUI Custom tab jEasyUI Enable in-line editing jEasyUI Extension editor jEasyUI Column operation jEasyUI Merge Cells jEasyUI Create a custom view jEasyUI Create a footer summary jEasyUI Condition Sets the line background color jEasyUI Create an attribute grid jEasyUI The extended line shows the details jEasyUI Create a subgrid jEasyUI Display massive data jEasyUI Add a paging component

jEasyUI window

jEasyUI Create a simple window jEasyUI Customize the Window Toolbar jEasyUI Window and layout jEasyUI Create a dialog box jEasyUI Customize the dialog box

jEasyUI Tree menu

jEasyUI Use the markup to create a tree menu jEasyUI Create an asynchronous tree menu jEasyUI Tree menu to add nodes jEasyUI Create a tree menu with check boxes jEasyUI Tree menu drag and drop control jEasyUI The Tree menu loads the parent / child nodes jEasyUI Create the base tree grid jEasyUI Create a complex tree grid jEasyUI Dynamic loading of tree jEasyUI The tree grid adds pagination jEasyUI Tree-lazy lazy-loading node

jEasyUI Form

jEasyUI Create an asynchronous submission form jEasyUI Form validation jEasyUI Create a tree drop-down box jEasyUI Format the drop-down box jEasyUI Filter down the data grid

jEasyUI Reference Manual

jQuery EasyUI Plugin jQuery EasyUI Extended

jQuery EasyUI based plug - Tooltip balloons

jQuery EasyUI plugin jQuery EasyUI plugin

By $. Fn.tooltip.defaults override the default defaults.

When the user moves the mouse pointer on an element when prompted window is used to display additional information. Tips can contain any content from the page, or by ajax generated html element.

usage

Create a prompt box (Tooltip)

1, from tags to create balloon (Tooltip), add 'easyui-tooltip' class to the element, does not require any javascript code. 

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

2, using javascript to create balloon (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'
		});
    }
});

Attributes

名称 类型 描述 默认值
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

event

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

method

名称 参数 描述
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 plugin jQuery EasyUI plugin