Angular EasyUI 提示框

2020-06-24 17:29 更新

當(dāng)用戶的鼠標(biāo)指針停留在某個(gè)元素上時(shí),該元素出現(xiàn)提示信息窗口用來顯示額外的元素相關(guān)信息。

提示框指令( TooltipDirective )

  • 屬性列表
名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
tooltipCls string 提示框樣式類。 null
tooltipStyle Object 提示框的內(nèi)聯(lián)樣式。 null
content string OR TooltipContentComponent 提示框內(nèi)容。 null
position string 提示框的位置??蛇x值:'left', 'right', 'top', 'bottom'。 bottom
trackMouse boolean 為True時(shí),使提示框同鼠標(biāo)一起移動(dòng)。 false
deltaX number 與提示框位置的水平距離。 0
deltaY number 與提示框位置的垂直距離。 0
showDelay number 顯示提示框的時(shí)間延遲。 200
hideDelay number 隱藏提示框的時(shí)間延遲。 100
showEvent string 使提示框出現(xiàn)的事件。 mouseenter
hideEvent string 使提示框隱藏的事件。 mouseleave

  • 事件列表
名稱 參數(shù) 作用描述
tooltipShow none 顯示提示框時(shí)觸發(fā)。
tooltipHide none 隱藏提示框時(shí)觸發(fā)。

  • 方法列表
名稱 參數(shù) 返回值 作用描述
show none void 顯示提示框。
hide none void 隱藏提示框。

注:
- 繼承: None 。
- 選擇器: [euiTooltip] 。

  • 使用方法

  1. <div style="padding:20px 40px">
  2. <span euiTooltip="This is a tooltip.">Hover Me</span>
  3. </div>
  4. <div style="padding:20px 140px">
  5. <span [euiTooltip]="tc">登錄到系統(tǒng)</span>
  6. </div>
  7. <eui-tooltip-content #tc>
  8. <eui-panel [border]="false" style="width:200px">
  9. <div style="padding:10px">
  10. <eui-textbox iconCls="icon-man" style="width:100%"></eui-textbox>
  11. </div>
  12. <div style="padding:10px">
  13. <eui-passwordbox style="width:100%"></eui-passwordbox>
  14. </div>
  15. <div style="text-align:center;padding:10px">
  16. <eui-linkbutton>登錄</eui-linkbutton>
  17. <eui-linkbutton>取消</eui-linkbutton>
  18. </div>
  19. </eui-panel>
  20. </eui-tooltip-content>

提示框內(nèi)容( TooltipContentComponent )

  • 屬性列表
名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
tooltipCls string 提示框樣式類。 null
tooltipStyle Object 提示框的內(nèi)聯(lián)樣式。 null
content string 提示框內(nèi)容。 null
position string 提示框的位置??蛇x值:'left', 'right', 'top', 'bottom'。 bottom
trackMouse boolean 為True時(shí),使提示框同鼠標(biāo)一起移動(dòng)。 false
deltaX number 與提示框位置的水平距離。 0
deltaY number 與提示框位置的垂直距離。 0
target HTMLElement 當(dāng)懸停在目標(biāo)元素上時(shí)顯示提示框消息的目標(biāo)元素。 null

  • 方法列表
名稱 參數(shù) 返回值 作用描述
show none void 顯示提示框。
hide none void 隱藏提示框。
reposition none void 重置提示框位置。

注:
- 繼承: None 。
- 選擇器: eui-tooltip-content 。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)