css title小技巧

经常遇到的一个需求，鼠标悬浮不同的文字，显示不同的提示信息

1，css有一个hover，但是只限制单个，动态去给定值的话，就不太合适了

// css 
title hover{
	// 
}

2，用jq的方法

$("#xxx").mouseover(function () {
	console.log('xxx')
}) // 这样子去绑定

// 但是假如dom是通过遍历动态去添加的，上面那个方法就不行了，得重新写一下
$("#xxx").on("mouseover" , "#xxx" , function() {
	console.log('xxx')
})

3，css有一个title属性

// html
<p title="这个是提示信息">按钮</p>
// 鼠标悬浮，就可以显示不同的提示信息，只需要在js中找到当前元素，给title赋值就可以了
// 缺点就是不可以更改样式，鼠标悬浮的时候，显示文字比较慢

4，css的tooltips
网上很多jq写好的精美插件，都可以直接用

// html
<div class="tooltip">鼠标移动到这
  <span class="tooltiptext">提示文本</span>
</div>

// css
/* Tooltip 容器 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
 
/* Tooltip 文本 */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* 定位 */
    position: absolute;
    z-index: 1;
}
 
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}