More Bootstrap Components

Tooltip

Tooltip is an example of a Bootstrap component that requires jQuery.

Sample code: <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
the title attribute displays the text when one hovers over the item.

The title attribute (without any Bootstrap) will display a tooltip as shown above. Bootstrap can change the appearance of the tooltip and the placement of the tooltip as shown below. Three things are necessary to get this to work:

1) Adding a data-toggle="tooltip" as an attribute of the "a" tag.

2) Referencing Bootstrap and jQuery as usual

2) Initializing with jQuery - select the specified element and call the tooltip method. The following code will enable all tooltips in the document. Since this code is referencing jQuery, it must go after the <script> tag that references jQuery. This code can appear between script tags as shown below or in an external JavaScript file. What the code does is execute the tooltip() method on any html element that has an attribute data-toggle set equal to tooltip. In writing the code, one must pay attention to the use of brackets and parentheses.

<script>
$(document).ready(function() {

$('[data-toggle="tooltip"]').tooltip();
});
</script>

NVCC

Collapse

Sample code:

<a href="#demo" class="btn btn-primary" data-toggle="collapse">Simple collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

1. Making this into a button by adding btn btn-primary is optional. Without it, it would be an ordinary link
2. The link between the clickable item and the item to be displayed or collapsed is done through the id given to the collapsible item and the href attribute of the link.

By default the item in the section that can collapse is hiddern, but one can add a class of .show to the content so that is shows by default.

Revised: April 19, 2018