Question

我在使用引导程序3将HTML引入工具提示时遇到了麻烦。我已经搜寻了Internet并尝试了（看似）所有内容，但是没有用。我将代码放在下面，但是基本上发生的是，当我将鼠标悬停在链接上时，它会生成没有HTML的工具提示，但也会在网页本身上放置相同的文本。当我离开悬停时，工具提示（没有html）消失了，但是网页上的文本仍然保留。有人可以帮忙吗？我的代码如下... 我正在使用的Bootstrap（js和CSS）版本是3.3.7。 jQuery的版本是3.1.0

感谢您的帮助。另外，我找不到标签的“ Bootstrap-3”，因此不得不使用twitter-bootstrap。抱歉，如果引起混乱，但问题（3.3.7）中列出了我使用的Bootstrap版本。

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工具提示

this.residentProvider.maPhoto().subscribe(data => {
  console.log("--------------------");
  console.log("photo => " , data);
  this.maPhoto = data;
})

.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;
}

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

1 个答案: