将主体relative,hover显示的文字absolute.
<!doctype>
<html>
<head>
<meta charset="utf-8">
<script src = "jquery.min.js"></script>
</head>
<style type="text/css">
.hide {
display: none;
}
.content {
position: relative;
margin-top: 20px;
}//黑底白字
.content-tooltip {
background: #000;
color: #fff;
border-radius: 4px;
margin-left: 10px;
opacity: 0.8;
padding: 5px 10px 5px 10px;
position: absolute;
z-index: 1;
}
.content-tooltip-corner {
border-bottom: 5px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
opacity: 1.5;
position: absolute;
top: -5px;
}
</style>
<body>
<div id="show" class="content">Content
<div id="change" class="content-tooltip hide">
<span class="content-tooltip-corner"></span>Tooltip
</div>
</div>
</body>
<script type="text/javascript">
$(".content").mouseover(function(event){
var $this = $(this);
$this.find('.content-tooltip').removeClass("hide");
});
$(".content").mouseout(function(){
$(this).find('.content-tooltip').toggleClass("hide");
});
</script>
</html>-----------
<div class="content-tooltip hide" ng-if="box.childType == 'course'">
<span class="content-tooltip-corner out"></span>
<span class="content-tooltip-corner in"></span>
<div>123</div>
<div>123</div>
<div>123</div>
</div>//白底黑字
.content-tooltip {
background: #fff;
color: #000;
border-radius: 4px;
left: 5px;
opacity: 0.8;
padding: 5px 10px 5px 10px;
position: absolute;
z-index: 1;
top: 55px;
min- 250px;
text-align: left;
border: 1px solid #d9dadc;
.content-tooltip-corner {
position: absolute;
left: 95px;
margin-top: -8px;
border- 8px;
border-style: dashed;
border-color: transparent;
border-top- 0;
border-bottom-color: #d9dadc;
border-bottom-style: solid;
&.out {
top: 0;
}&.in {
border-bottom-color: #fff;
top: 1px;
}
}
}