Adding Bold Text in Bootstrap JS Tooltip

I am trying to add a header, content and some bold text to the bootstrap tool tip. The only option I found it title and that displays text in all the same format.

Any suggestions for this is much appreciated!

Here is my 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>

Here is my jQuery:

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

Here is my 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;
}

You can supply your own HTML for the Bootstrap Tooltip. If you look at the documentation, you'll notice there's an HTML attribute you can supply when initializing the tooltip.

So you can use something like the following:

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

(Note the documentation states that title will be inserted into the element with the tooltip-inner class.)

Then your HTML is simpler as well since you don't need all the data- attributes any more as these are specified in the above configuration object. So your HTML could be:

<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>

Once you have this, you can style your tooltip template using CSS through accessing the classes you assign to the elements. To bold your header you could do:

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

(Or you could just add an em tag to the template, but you get the point.)