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

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

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

Вот мой 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;
}

html jquery twitter-bootstrap tooltip jquery-tooltip
person tiaMCQD    schedule 30.06.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете указать свой собственный HTML для всплывающей подсказки Bootstrap. Если вы посмотрите на документацию, вы заметите, что есть атрибут 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 в шаблон, но вы поняли.)

person Jon Rubins    schedule 30.06.2015
comment
Большое спасибо, я совсем пропустил ссылку на полную документацию в W3Schools, вы правы, там вся информация! - person tiaMCQD; 30.06.2015