上篇文章（實現 React 組件系列 1 —— Modal）中，我們簡單介紹瞭浮層組件，並基於 Portal 實現瞭 Modal 組件。在這篇文章中，我們會實現另一種浮層組件 Tooltip。
和 Modal 組件一樣，Tooltip 也需要基於 Portal 組件來創建。不同的是，Tooltip 需要基於觸發它的元素進行定位。 然而，通過 Portal 將 Tooltip 的彈出層傳送到應用根節點之後，Tooltip 的「觸發器」和「內容」在 DOM 中就不再是父子節點關系瞭（如下所示），因此無法通過 CSS 相對定位來定位 Tooltip。
那麼，如何定位 Tooltip 就成瞭我們亟待解決的問題。
元素定位
對於 Tooltip 這類浮層組件來說，既然無法使用「相對定位」，那就隻能采用「絕對定位」瞭。我們可以通過定義 position: absolute ，並設置 top、left、right 和 bottom 的值，來對一個元素進行絕對定位。
getBoundingClientRect
如何給元素設置正確的 top 和 left 值呢？這裡需要用到一個關鍵的 API： Element.getBoundingClientRect()。它的返回值是一個 ClientRect 對象，其接口定義如下：
interface ClientRect {
x: number;
y: number;
width: number;
height: number;
top: number;
right: number;
bottom: number;
left: number;
}
