Используя Bootstrap 3, как добавить html во всплывающую подсказку?

Question

У меня были проблемы с вводом HTML во всплывающую подсказку с помощью начальной загрузки 3. Я искал в Интернете и пробовал (казалось бы) все, но это не работает. Я приведу свой код ниже, но, по сути, происходит, когда я наводю указатель мыши на ссылку, он генерирует всплывающую подсказку без HTML, но он также размещает тот же текст на самой веб-странице. Когда я оставляю указатель мыши, всплывающая подсказка (без HTML) исчезает, но текст на веб-странице остается. Кто-нибудь может помочь? Мой код ниже... Используемая мной версия начальной загрузки (js и css) - 3.3.7. Версия jquery 3.1.0

Спасибо за помощь. Кроме того, я не смог найти "Bootstrap-3" для тега, поэтому мне пришлось использовать twitter-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>