.tooltip-content?::after{????display:block;????content:'';????width:30px;????height:20px;????background:?url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDMwIDIwIj4NCgk8Zz4NCgkJPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTcuMDY1LDcuMDY3QzEzLjQ2MiwxMC4zMzksMTUsMTkuMTM3LDE1LDE5LjEzN1YwSDBDMCwwLDEuODY1LDQuNDA3LDcuMDY1LDcuMDY3eiIvPg0KCQk8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTUsMHYxOS4xMzdjMCwwLDEuNTM3LTguNzk3LDcuOTM2LTEyLjA3QzI4LjEzNSw0LjQwNywzMCwwLDMwLDBIMTV6Ii8+DQoJPC9nPg0KPC9zdmc+DQo=")?no-repeat?center?center;????position:absolute;????top:100%;????left:50%;????margin-left:-15px;????????margin-top:-7px;}

不是氣泡下面那個(gè)尖尖的東西嗎？怎么打開(kāi)了是個(gè)圓？？？

@決明，謝謝。

1樓給的是整張圖，只要改一下寬高和背景定位位置就好了

.tooltip-content::after{
????display:?block;
????content:?'';
????width:?80px;
????height:?20px;
????background:?url(./tooltip.svg)?no-repeat?0?-80px;
????background-size:?100%;
????position:?absolute;
????top:?100%;
}

上邊提供的文件是一個(gè)整張的圖片,所以我把代碼該成這樣使用了;去掉了.tooltip-content:after的步驟;

.tooltip-content?{
	position:?absolute;
	z-index:?9999;
	width:80px;
	height:80px;
	left:50%;
	margin-left:?-40px;
	bottom:100%;
	margin-bottom:?20px;
	text-align:?center;
	padding-top:?22px;
	/*應(yīng)用svg文件做背景圖片;*/
	background:url(../img/tooltip1.svg)?no-repeat?center?center;
	opacity:?0;
	transition:0.4s;
}

我畫(huà)了一個(gè)歡迎使用

<?xml?version="1.0"?encoding="utf-8"?>
<!--?Generator:?Adobe?Illustrator?18.0.0,?SVG?Export?Plug-In?.?SVG?Version:?6.00?Build?0)??-->
<!DOCTYPE?svg?PUBLIC?"-//W3C//DTD?SVG?1.1//EN"?"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg?version="1.1"?id="圖層_1"?xmlns="http://www.w3.org/2000/svg"?xmlns:xlink="http://www.w3.org/1999/xlink"?x="0px"?y="0px"
?????viewBox="0?0?80?90"?enable-background="new?0?0?80?90"?xml:space="preserve">
<g>
????<path?fill="#FFffff"?d="M39.8,89.5c0,0.2,0.4,0.2,0.4,0c1.2-6.7,7.4-11.8,14.8-11.8H25C32.4,77.7,38.6,82.8,39.8,89.5z"/>
????<circle?fill="#FFffff"?cx="40"?cy="40.3"?r="40"/>
</g>
</svg>