用原生TypeScript造輪子（三） tooltip

ui參考primeNG: http://primefaces.org/primeng...
ts開發環境： https://github.com/lycHub/ts-...
目錄

說明

ui參考primeNG
已實現的功能：

• 4個方向
• 能夠hover或click觸發
• 延遲顯示或消失

demo和源碼

思路

先把4個方向的tooltip樣式都寫好，方向用class控制，若是是hover觸發，mouseenter的時候建立tooltip元素，mouseleave的時候銷燬，
在顯示前先定好位置，我這隻作了4個方向居中的定位。
這組件相對前兩個簡單很多，只要顯示的位置算的精確就沒什麼問題

要注意的是，由於tooltip是absolute定位，默認是append到body中，有時候用戶更知道應該append到哪去，因此這方面不推薦寫死，好比我這能夠選擇append到宿主元素裏或用戶本身傳入的dom