css实现的鼠标悬浮提示

css content 的attr 实现 鼠标悬浮 显示 悬浮提示，

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

html:

<div>

    <span data-tooltip="hello world">Hover Me!!!</span>

</div>

css:

	body{
		padding:100px;
	}
	span{
		position:relative;
		display:inline-block;
	}
	span:hover{
		cursor:pointer;
	}
	span:hover:before{
		content:attr(data-tooltip);
		background:#d9444a;
		color:#fff;
		padding:.8em 1em;
		position:absolute;
		left:100%;
		top:-70%;
		margin-left:14px;
		white-spack:pre;
	}
	span:hover:after{
		content:" ";
		position:absolute;
		left:80%;
		width:0;
		height:0;
		border-right:8px solid #d9444a;
		border-top:8px solid transpatrnt;
		border-bottom:8px solid transparent;
	}
	

data- 为自定义属性，如上 自定义 提示 data-tooltip ="hello world",

配合 before ，after 使用 content 的attr 调用 自定义提示，

content: attr(data-tooltip);