Angular EasyUI 提示框

当用户的鼠标指针停留在某个元素上时，该元素出现提示信息窗口用来显示额外的元素相关信息。

提示框指令（ TooltipDirective ）

属性列表

名称	数据类型	作用描述	默认值
tooltipCls	string	提示框样式类。	null
tooltipStyle	Object	提示框的内联样式。	null
content	string OR TooltipContentComponent	提示框内容。	null
position	string	提示框的位置。可选值：'left', 'right', 'top', 'bottom'。	bottom
trackMouse	boolean	为True时,使提示框同鼠标一起移动。	false
deltaX	number	与提示框位置的水平距离。	0
deltaY	number	与提示框位置的垂直距离。	0
showDelay	number	显示提示框的时间延迟。	200
hideDelay	number	隐藏提示框的时间延迟。	100
showEvent	string	使提示框出现的事件。	mouseenter
hideEvent	string	使提示框隐藏的事件。	mouseleave

事件列表

名称	参数	作用描述
tooltipShow	none	显示提示框时触发。
tooltipHide	none	隐藏提示框时触发。

方法列表

名称	参数	返回值	作用描述
show	none	void	显示提示框。
hide	none	void	隐藏提示框。

注：
- 继承： None 。
- 选择器： [euiTooltip] 。

使用方法

<div style="padding:20px 40px">
    <span euiTooltip="This is a tooltip.">Hover Me</span>
</div>
<div style="padding:20px 140px">
    <span [euiTooltip]="tc">登录到系统</span>
</div>
<eui-tooltip-content #tc>
    <eui-panel [border]="false" style="width:200px">
        <div style="padding:10px">
            <eui-textbox iconCls="icon-man" style="width:100%"></eui-textbox>
        </div>
        <div style="padding:10px">
            <eui-passwordbox style="width:100%"></eui-passwordbox>
        </div>
        <div style="text-align:center;padding:10px">
            <eui-linkbutton>登录</eui-linkbutton>
            <eui-linkbutton>取消</eui-linkbutton>
        </div>
    </eui-panel>
</eui-tooltip-content>

提示框内容( TooltipContentComponent )

属性列表

名称	数据类型	作用描述	默认值
tooltipCls	string	提示框样式类。	null
tooltipStyle	Object	提示框的内联样式。	null
content	string	提示框内容。	null
position	string	提示框的位置。可选值：'left', 'right', 'top', 'bottom'。	bottom
trackMouse	boolean	为True时,使提示框同鼠标一起移动。	false
deltaX	number	与提示框位置的水平距离。	0
deltaY	number	与提示框位置的垂直距离。	0
target	HTMLElement	当悬停在目标元素上时显示提示框消息的目标元素。	null

方法列表

名称	参数	返回值	作用描述
show	none	void	显示提示框。
hide	none	void	隐藏提示框。
reposition	none	void	重置提示框位置。

注：
- 继承： None 。
- 选择器： eui-tooltip-content 。