很仓促的写，有空再优化
效果
CSS
.tooltip-item {
position: relative;
}
.tooltip-item:before {
content: '';
display: inline-block;
position: absolute;
bottom: calc(100% - 6px);
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 0;
height: 0;
border-top: 6px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
-webkit-transition: all .15s;
-o-transition: all .15s;
transition: all .15s;
opacity: 0;
pointer-events: none;
}
.tooltip-item:after {
content: attr(data-tips);
position: absolute;
display: inline-block;
bottom: calc(100%);
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
height: auto;
max-width: 200px;
word-wrap: break-word;
background-color: #000;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
text-align: center;
-webkit-transition: all .15s;
-o-transition: all .15s;
transition: all .15s;
opacity: 0;
pointer-events: none;
}
.tooltip-item:hover:before {
opacity: 1;
bottom: calc(100% + 4px);
}
.tooltip-item:hover:after {
bottom: calc(100% + 10px);
opacity: 1;
}
HTML
<span class="tooltip-item" data-tips="66666666666666666666666666666666666666666666">Tooltip</span>
