jQuery 滑鼠移過文字時出現懸浮式文字提示

hover.js 是一個簡單好用的自定義 jQuery 工具提示插件,將滑鼠懸停在物件上時會顯示文字提示。
按這裡下載我們提供的 demo.html 自行編輯修改內容及 js / css 路徑。
3.2 KiB / RAR
jQueryjQuery hover.js 放入 HTML 文件中
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="jquery.hover.js"></script>
data-hover屬性裡自訂提示內容
很高興見到你。這裡是<span data-hover="Is Life">易思生活</span>
修改 sample.css。可任意重寫或修改 CSS 代碼來創建自訂樣式
.hover-text {
	display: inline-block;
	position: absolute;
	background: #222;
	border-radius: .4em;
	padding: 12px;
	font-size: .85em;
	color: #fff;
}
.hover-text:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #222;
	border-bottom: 0;
	border-left: 0;
	margin-left: -10px;
	margin-bottom: -20px;
}