从下面的例子，我如何插入一个徽章或一些格式化的文本(例如彩色粗体)在文本的末尾，出现在悬停的圆圈?
$(".tooltip-elem").hover(function() {
var tooltipText = $(this).data("tooltip");
//console.log(tooltipText);
$("#placeholder").html(tooltipText);
});
$(".tooltip-elem").on("mouseleave", function() {
$("#placeholder").html("");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg style="display: inline-block;" width="250" height="150">
<circle class="tooltip-elem" id="circle_1" cx="30" cy="45" r="25" data-tooltip="That's a circle !" />
</svg>
<div id="placeholder"></div>如果您想要Boostrap工具提示正确显示，您必须使用适当的属性。没有data-tooltip属性。HTML应该放在title属性中，并且应该定义toggle,html和placement数据属性。
查看文档:Boostrap 4.0文档-工具提示
$('[data-toggle="tooltip"]').tooltip();:root {
--tooltip-background: #A00;
}
.tooltip > .tooltip-inner {
background: var(--tooltip-background);
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
border-right-color: var(--tooltip-background);
}
.badge {
visibility: hidden;
}
.badge::after {
content: '1F600';
visibility: visible;
display: block;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<svg style="display: inline-block;" width="250" height="150">
<circle id="circle_1" class="red-tooltip"
cx="30" cy="45" r="25"
data-toggle="tooltip"
data-html="true"
data-placement="right"
title="<h4>That's a circle ! <span class='badge'>my badge</span></h4>"/>
</svg>我找到了一个方法。
$(".tooltip-elem").hover(function() {
var tooltipText = $(this).data("tooltip");
$("#placeholder").html(tooltipText);
}, function() {
$("#placeholder").html("");
});<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<svg style="display: inline-block;" width="250" height="150">
<circle class="tooltip-elem" id="circle_1" cx="30" cy="45" r="25" data-tooltip="That's a circle ! <span class='label label-primary'>my badge</span>" />
</svg>
<div id="placeholder"></div>