純CSS實現tooltip，css更改html標籤的title樣式【筆者有時間會更新一些邊界條件。目前的樣式在極端情況是有問題的，請不要直接將代碼copy到線上環境，這只是筆者寫的一個小demo】
html代碼：
以下代碼直接可用，tootip的樣式可以自己調試。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
display: flex;
justify-content: center;
align-items: center;
}
span {
position: relative;
margin: 50px auto;
border: 1px solid;
}
span[aria-label]:hover:after {
content: attr(aria-label);
position: absolute;
bottom: -30px;
left: 0;
border: 1px solid;
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<span aria-label="我是tooltip">我是主體內容啊</span>
</div>
</body>
</html>