Как отключить всплывающую подсказку в браузере с помощью подсказки bootstrap4

Question

Следующий код показывает как всплывающую подсказку начальной загрузки, так и собственную подсказку атрибута заголовка:

This is my text. 
<i class="far fa-question-circle" data-toggle="tooltip" title="This is my tooltip."></i> 
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

скрипка

Как я не могу показать собственный атрибут title у Song-icon Fontawesome 5, поэтому отображается только всплывающая подсказка Bootstrap?

Answer 1

Вы можете попробовать следующий HTML

This is my text. <i class="far fa-question-circle" data-toggle="tooltip" data-title="This is my tooltip."></i> 

Поскольку браузер по умолчанию трудно переопределить и может вызвать непредвиденное поведение, мы можем выбрать альтернативный способ решения проблемы.

Всплывающая подсказка Bootstrap 4 также может показывать всплывающую подсказку, если к атрибуту добавлен префикс data, так что вы можете заменить title приписать с data-title

Вот обновленная скрипка

https://jsfiddle.net/samuelj90/qfcs9azv/18/

Answer 2

У меня были проблемы с data-title из ответов выше, вместо этого мне пришлось использовать data-original-title. Вы можете установить это свойство с помощьюattr функция из jQuery или непосредственно в DOM.

HTML:

This is my text. 
<i class="far fa-question-circle" data-toggle="tooltip"></i> 

JavaScript:

$(function () {
    //Initialize the Bootstrap tooltip
    $('[data-toggle="tooltip"]').tooltip();

    //Force the Tooltip title change at run time
    $('.fa-question-circle').attr('data-original-title', "This is my tooltip.");
})

Скрипка

Answer 3

Вы можете достичь title атрибут, поэтому не используйте напрямую data-title или data-original-titleатрибут из-за того, что если мы нацелены на SEO-дружественную страницу, тогда необходимо хорошо написать текст заголовка. Так что это неBootstrap4 проблема с подсказкой, поэтому основная причина в том, что при создании svg пометить fontawesome скрипт для значка, затем его упаковка title="hello" attribute к <title>hello<title> tagвнутри тега svg.
Итак, мы можем удалитьtitle пометить show.bs.tooltipсобытие.

Документ: https://getbootstrap.com/docs/4.4/components/tooltips/

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});
$(function () {
  $('[data-toggle="tooltip"]').on('show.bs.tooltip', function (e) {
   //Remove title tag from inside created svg tag
   $(this).find('title').remove();
 });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>


<div class="container py-4">
  <div class="row">
    <div class="col-sm-4">
     This is my text. <i class="far fa-question-circle" data-toggle="tooltip" title="This is my tooltip."></i>
    </div>
  </div>
</div>