quill鼠标悬浮 出现提示_html实现鼠标悬停显示气泡文字内容

需求描述：当鼠标悬停在一个元素上的时候，显示气泡，气泡内容可以是一段文字或图片。实现如下：

html>

气泡显示

.container {

margin-top: 130px;

}

#xsztip {

padding: 8px 12px;

width: 140px;

display: block;

font-size: 16px;

color: #fff;

font-weight: bold;

background: #ED5517;

cursor: pointer;

}

#xszimg {

position: absolute;

display: none;

padding: 10px;

width: 160px;

background: #e0edf7;

border-radius: 6px;

}

#xszimg::before {

content: "";

position: relative;

top: -20px;

left: 10px;

width: 0;

height: 0;

display: block;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid #e0edf7;

}

鼠标悬停显示气泡

这是需要提示的文字内容,可以修改！

$(function(){

$("#xsztip").hover(function(){

show_xszimg(this);

},function(){

show_xszimg();

});

function show_xszimg(f){

var d=$("#xszimg");

if(!f){

d.fadeOut()

}else{

var c=$(f);

var e=c.offset();

var a=e.left;

var b=e.top + 44;

d.css({left:a+"px",top:b+"px"}).show();

}

}

});