css3提示文字弹窗代码

文章目录

给你的项目增加一个工具提示,不需要额外的javascript代码,你可以通过使用css3样式来创建一个类似的效果。

css3 提示只适用于高级浏览器:

  • Chrome
  • Firefox
  • Safari
  • IE9+

css代码

/**
 * CSS3 Tips
 *
 * A stylesheet for creating tooltips without using anything other than CSS3.
 *
 * created by c.bavota
 * released under GPL v2
 *
 * November 6th, 2013
 */
[data-tips] {
	position: relative;
	text-decoration: none;
}
	[data-tips]:after,
	[data-tips]:before {
	    position: absolute;
	    z-index: 100;
		opacity: 0;
	}
		[data-tips]:after {
			content: attr(data-tips);
			height: 25px;
			line-height: 25px;
			padding: 0 10px;
			font-size: 12px;
			text-align: center;
			color: #fff;
			background: #222;
			border-radius: 5px;
			text-shadow: 0 0 5px #000;
			-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
			-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
			box-shadow: 0 0 5px rgba(0,0,0,0.3);
			white-space: nowrap;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		[data-tips]:before {
			content: "";
			width: 0;
			height: 0;
			border-width: 6px;
			border-style: solid;
		}
			[data-tips]:hover:after,
			[data-tips]:hover:before {
				opacity: 1;
			}
/* Top tips */
[data-tips].top-tip:after,
[data-tips].top-tip:before {
    -webkit-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
	bottom: 90%;
	left: -9999px;
	margin-bottom: 12px;
}
	[data-tips].top-tip:before {
		border-color: #222 transparent transparent transparent;
		margin-bottom: 0;
	}
	[data-tips].top-tip:hover:after,
	[data-tips].top-tip:hover:before {
		bottom: 100%;
		left: 0;
	}
	[data-tips].top-tip:hover:before {
		left: 15px;
	}
/* Bottom tip */
[data-tips].bottom-tip:after,
[data-tips].bottom-tip:before {
    -webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
	top: 90%;
	left: -9999px;
	margin-top: 12px;
}
	[data-tips].bottom-tip:before {
		border-color: transparent transparent #222 transparent;
		margin-top: 0;
	}
	[data-tips].bottom-tip:hover:after,
	[data-tips].bottom-tip:hover:before {
		top: 100%;
		left: 0;
	}
	[data-tips].bottom-tip:hover:before {
		left: 15px;
	}
/* Right tip */
[data-tips].right-tip:after,
[data-tips].right-tip:before {
    -webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
	top: -9999px;
	left: 96%;
	margin-left: 12px;
}
	[data-tips].right-tip:before {
		border-color: transparent #222 transparent transparent;
		margin-left: 0;
	}
	[data-tips].right-tip:hover:after,
	[data-tips].right-tip:hover:before {
		left: 100%;
		top: 0;
	}
	[data-tips].right-tip:hover:before {
		top: 7px;
	}
/* Left tip */
[data-tips].left-tip:after,
[data-tips].left-tip:before {
    -webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
	top: -9999px;
	right: 96%;
	margin-right: 12px;
}
	[data-tips].left-tip:before {
		border-color: transparent transparent transparent #222;
		margin-right: 0;
	}
	[data-tips].left-tip:hover:after,
	[data-tips].left-tip:hover:before {
		right: 100%;
		top: 0;
	}
	[data-tips].left-tip:hover:before {
		top: 7px;
	}

一旦你添加了上面的css3代码之后,你就可以创建你的工具提示了

html代码

<a href="http://bavotasan.com" class="top-tip" data-tips="Go to bavotasan.com">bavotasan.com</a>

你所需要的就是添加data-tip=""参数到任何你需要的HTML元素,同时设置工具提示的方面的class.

Examples

caibaojian.com

Different Directions

In order to make a tooltip appear in a different direction you need to use one of four classes:

  • top-tip
  • bottom-tip
  • left-tip
  • right-tip

A tooltip on top   A tooltip on the bottom   A left tooltip   A right tooltip

下载25个css工具提示

原文链接:css3提示文字弹窗代码 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/css3-tooltip.html)

发表评论

请登录后发表评论:

2 Responses to “css3提示文字弹窗代码”

  1. izual

    left ,right 两个搞反了

    登录回复