javascript - 使用 Bootstrap 3，如何将 html 添加到工具提示？

Question

我在使用 Bootstrap 3 将 HTML 添加到工具提示中时遇到了问题。我已经搜索了互联网并尝试了(看似)所有方法，但它不起作用。我将把我的代码放在下面，但基本上发生的情况是，当我将鼠标悬停在链接上时，它会生成一个没有 HTML 的工具提示，但它也会将相同的文本放置到网页本身上。当我离开鼠标悬停时，工具提示(没有 html)消失，但网页上的文本仍然存在。有人可以帮忙吗？我的代码如下... 我使用的bootstrap(js和css)版本是3.3.7。 jquery的版本是3.1.0

感谢您的帮助。另外，我找不到“Bootstrap-3”标签，所以我不得不使用 twitter-bootstrap。抱歉，如果这会引起困惑，但我正在使用的 Bootstrap 版本已在问题(3.3.7)中列出。

HTML 代码

    <link href="static/css/opendcs.css" rel="stylesheet">
<script src="static/js/jquery-3.1.0.min.js"></script> 
<script src="static/js/blah.js"></script> 
<form method=post enctype=multipart/form-data>
<legend class="legendFooter noBottomMargin noBorders">Upload Rating Table</legend>
<legend></legend>
  <div class="container blah">
    <div class="panel panel-default">
      <input type=file name=file>
    </div>
    <input class="btn btn-info" type=submit value=Upload>

    <a id="additionalInfoToolTip" href="#" data-html="true" data-toggle="tooltip"  data-placement="right" title="Here is a title" target="_blank">Additional Information</a>
  </div>
</form>

blah.js:

$( document ).ready(function() {
    console.log( "Page is ready." );
    //$('#additionalInfoToolTip').tooltip();
    $('#additionalInfoToolTip').tooltip({
        selector: "a[rel=tooltip]"
      });
/*
  $('#additionalInfoToolTip').tooltip({
    selector: "a[rel=tooltip]"
  })

  $('.tooltip-demo.well').tooltip({
  selector: "a[rel=tooltip]"
})
*/
    $(function () {
        /*
      $('[data-toggle="tooltip"]').tooltip({
      })
      */
    })

});

Answer 1

为什么不使用完整的 CSS 工具提示

.wrap{
  padding: 100px
}
.tooltip{
  background: #fa0;
  display: inline-block;
  color: #fff;
  position: relative;
  padding: 5px 10px;
  border-radius: 20px;
}

/* Needed css */
.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
}
        
.tooltip::after{
content: attr(data-title); /* <= dynamically title content */
z-index: 22;
	position: absolute;
	top: -35px;
	left: -27px;
	min-width: 60px;
	padding: 5px 10px;
	font-size: 70%;
	text-align: center;
	color: #fff;
	background: #000;
	border-radius: 20px;
	opacity: 0;
}

.tooltip::before{ /* For the arrow */
  content: '';
	width: 10px;
	height: 10px;
	background: #111;
	position: absolute;
	transform: rotate(45deg);
	top: -18px;
	left: 8px;
	opacity: 0;
}

<div class="wrap">
<span class="tooltip" data-title="Tool tip text">
Main text
</span>

<span class="tooltip" data-title="Another Tool tip text">
AnotherMain text
</span>

</div>