組件實作 : Demo

一、前言

Tooltip 是文字提示的組件，感覺上它很容易被忽略，其實這一個功能在網頁上也很常找到它的芳蹤，其實作的原理，也不會太過於困難，比較需要留意的地方會是定位的使用以及建立三角形，那麼現在我們就來直接實作一個 Tooltip ****組件吧！

二、直接實作 Tooltip 組件

2.1 Tooltip 主要架構

Tooltip 的架構是由一個 div 的內部包著一個 span 元素所組成，span 內的文字代表提示文字，待會會讓這個提示文字先隱藏起來，等到滑鼠游標經過時，提示文字才會顯示在螢幕上，這裡先參考下面的程式碼。

HTML：

<div class="tooltip">
	工具提示
	<span class="tooltiptext">你好！我是提示文字！！</span>
</div>

顯示結果：

HTML 寫好後只會出現一行文字。

2.2 起手式

接著是處理螢幕的水平垂直置中，這裡順便把背景顏色改成墨綠色，完成起手式後，會得到以下的畫面。

CSS：

* {
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #376b6d;
}

顯示結果：

2.3 主頁文字添加樣式

接下來我們要修改主頁的文字顏色以及它的大小，主頁文字的 Class 名稱是 tooltip，同時它也在最外層，所以我們將它當作是父層來使用，這裡將tooltip的Position設定為Relective，目的是為了讓裡面的tooltiptext有個定位的基準。

CSS：

.tooltip {
	margin: 50px;
	display: block;
	border-bottom: 1px dotted ，#fff;
	font-size: 2rem;
	color: #fff;
	position: relative;
}

顯示結果：

由於我們還沒有對tooltiptext進行修改，在下一小節中，我們要修改tooltiptext的字體顏色、字體大小、裝飾用的三角形，以及最重要的排版位置。

2.4 提示文字樣式

.tooltip .tooltiptext定義文字的樣式以及擺放的位置，這裡可先將visibility: hidden;參數與opacity: 0;註解起來，方便調整位置，等到最後要執行時，再將註解取消。

CSS：

.tooltip .tooltiptext {
	/* visibility: hidden; */
	width: 220px;
	height: 50px;
	background-color: #739798;
	color: #fff;
	text-align: center;
	line-height: 50px;
	border-radius: 6px;
	padding: 0 20px;
	z-index: 1;
	position: absolute;
	left: 50%;
	bottom: 150%;
	transform: translate(-50%);
	transition: 0.3s;
	/* 	opacity: 0; */
	font-size: 1rem;
	border: 1px solid #fff;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #739798 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

顯示結果：

以上為一個基本的tooltip實作，在下一個章節裡，我們要將 4 個方向的提示文字都給補上。

三、四個方向的提示文字

3.1 改寫 HTML 架構

這裡我們要有能夠顯示四個方向的tooltiptext，由於我們使用的字體大小、樣式都一樣，所以不需要特別去修改原來的架構，只要再個別新增幾個 Class 名稱，用來替換tooltiptext的 Position 位置即可，以下為改寫後的 HTML 架構內容。

<div class="tooltip">
	工具提示
	<span class="tooltiptext">你好！我是提示文字！！</span>
</div>
<div class="tooltip">
	工具提示
	<span class="tooltiptext tooltiptext--right">你好！我是提示文字！！</span>
</div>
<div class="tooltip">
	工具提示
	<span class="tooltiptext tooltiptext--down">你好！我是提示文字！！</span>
</div>
<div class="tooltip">
	工具提示
	<span class="tooltiptext tooltiptext--left">你好！我是提示文字！！</span>
</div>

顯示結果：

由於我們只有加入 HTML，並沒有加入 CSS，所以提示文字的預設位置會在tooltip的上方，這時只要加入CSS 修正位置即可。

3.2 加入 CSS

其實位置的修改，使用了下面三個 Class，分別為：

1. .tooltiptext--right
2. .tooltiptext--down
3. .tooltiptext--left

CSS：

.tooltip .tooltiptext--right {
	right: -50%;
	bottom: 0;
	transform: translate(50%);
}

.tooltip .tooltiptext--down {
	right: 50%;
	bottom: -150%;
}

.tooltip .tooltiptext--left {
	left: -50%;
	bottom: 0;
	transform: translate(-90%);
}

顯示結果：（尚未取消註解）

顯示結果：（已取消註解）

這裡值得留意的一點是，被註解掉的兩行程式碼，雖然功能很像，可是卻有著不一樣的特性，這些特性除了影響排版之外，更重要的是會影響效能，關於Opacity和Visibility的比較，可以參考文章會更加清楚【2】【3】。

四、推薦資源

1. Day20-D3基本介紹(chart event、tooltip)
2. 34 CSS Tooltips
3. Tooltips · Bootstrap v5.0
4. CSS tooltip - CodePen

五、結論

本篇實作了 4 個方位的文字提示，原理就是先把文字提示的位子都先擺放好，然後將全部都隱藏起來，當 hover 觸發的時候，文字才會顯示。雖然功能是有做出來了，但是在三角形的部分沒有處理好，因為要趕著截稿，實在有點可惜，不過往好處想，之後如果要更新文章內容時，實作應該會變得比現更加熟悉吧！那麼，今天的文章就到這邊結束，感謝收看！

六、參考資料

1. How TO - Tooltip
2. visibility:hidden vs display:none vs opacity:0
3. CSS – display, visibility, opacity, transparent 的區别