.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;}

不是气泡下面那个尖尖的东西吗？怎么打开了是个圆？？？

@决明，谢谢。

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%;
}

上边提供的文件是一个整张的图片,所以我把代码该成这样使用了;去掉了.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;
	/*应用svg文件做背景图片;*/
	background:url(../img/tooltip1.svg) no-repeat center center;
	opacity: 0;
	transition:0.4s;
}

我画了一个欢迎使用

<?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>