Добавление полужирного текста в Bootstrap JS Tooltip

Question

Я пытаюсь добавить заголовок, содержимое и текст, выделенный жирным шрифтом, во всплывающую подсказку. Единственный вариант, который я нашел, это название, и это отображает текст в том же формате.

Любые предложения для этого очень ценятся!

Вот мой HTML:

<div class='wrap'>
   <div class='wrapText'>Webinars</div>
        <div class='wrapInfo'>
            <a class="learnMore" href="#" data-toggle="tooltip" data-placement="left" title='Info goes here'><span class='glyphicon glyphicon-info-sign'></span></a>
        </div>
</div>

Вот мой JQuery:

jQuery(document).ready(function () {
    jQuery('[data-toggle="tooltip"]').tooltip(); 
});

Вот мой CSS:

.wrapText,
.wrapInfo {
    width: 50%;
    float: left;
}
.wrapInfo {
    text-align: right;
    font-size: 18px;
}

.learnMore + .tooltip > .tooltip-inner {
      background-color: #ffffff; 
      color: #000000; 
      border: 5px solid #e96f34; 
      padding: 15px;
      font-size: 16px;
      border-radius: 5px;
  }
.learnMore + .tooltip.left > .tooltip-arrow {
      border-left: 5px solid #e96f34;
  }
.wrapInfo a {
    color: #e96f34;
}
.wrapInfo a:hover {
    color: #A34E24;
}

Answer 1

Вы можете указать свой собственный HTML-код для всплывающей подсказки. Если вы посмотрите на документацию, то заметите, что есть атрибут HTML, который вы можете указать при инициализации всплывающей подсказки.

Таким образом, вы можете использовать что-то вроде следующего:

jQuery('[data-toggle="tooltip"]').tooltip({
    placement: 'left',
    title: 'Info goes here',
    html: true,
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="my-tooltip-header"></div><div class="my-tooltip-body tooltip-inner"></div></div>
});

(Обратите внимание, в документации говорится, что title будет вставлен в элемент с tooltip-inner учебный класс.)

Тогда ваш HTML также проще, так как вам не нужны все data- атрибуты больше, так как они указаны в приведенном выше объекте конфигурации. Таким образом, ваш HTML может быть:

<div class='wrap'>
    <div class='wrapText'>Webinars</div>
        <div class='wrapInfo'>
            <a class="learnMore" href="#" data-toggle="tooltip">
                <span class='glyphicon glyphicon-info-sign'></span>
            </a>
        </div>
    </div>
</div>

Когда у вас есть это, вы можете стилизовать шаблон всплывающей подсказки, используя CSS, используя классы, которые вы назначаете элементам. Чтобы выделить заголовок, вы можете сделать:

.my-tooltip-header {
    font-weight: bold;
}

(Или вы можете просто добавить em тег к шаблону, но вы получите точку.)