css3 tooltip

最新推荐文章于 2021-07-02 10:07:38 发布

清风浪迹天涯

最新推荐文章于 2021-07-02 10:07:38 发布

阅读量581

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/xcyuzhen/article/details/7894487

版权

CSS 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

div.widget-tooltip {
	position: absolute;
	font-size: 12px;
	color: #719DAB;
	line-height: 20px;
	padding: 10px;
	text-align: center;
	border: 4px solid #fff;
	background: rgba(255,255,255,1);
	border-radius: 5px;
	pointer-events: none;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	opacity: 0;
}


div.widget-tooltip:before, div.widget-tooltip:after {
	content: '';
	position: absolute;
	left: 50%;
	margin-left: -9px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
/*三角符号朝下*/
/*
 div.widget-tooltip-top {
 box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 }
 div.widget-tooltip-top:before, div.widget-tooltip-top:after {
 bottom: -15px;
 border-top: 10px solid rgba(0,0,0,0.1);
 }
 div.widget-tooltip-top:after {
 margin-left: -10px;
 bottom: -14px;
 border-top: 10px solid #fff;
 }
 */
/*三角符号朝上*/
/*
 div.widget-tooltip-bottom {
 box-shadow: 1px -1px 2px rgba(0,0,0,0.2);
 }
 div.widget-tooltip-bottom:before, div.widget-tooltip-bottom:after {
 top: -15px;
 border-bottom: 10px solid rgba(0,0,0,0.1);
 }
 div.widget-tooltip-bottom:after {
 margin-right: -10px;
 top: -14px;
 border-bottom: 10px solid #fff;
 }
 */