Using Bootstrap in LibGuides

Required Script

For tool tips to work, you must place the following script either in your LibGuides' Custom JS/CSS (thus allowing tooltips on all pages) or somewhere else in your code for pages to have this feature:
<script>$(function () {$('[data-toggle="tooltip"]').tooltip()})</script>

Custome CSS

To improve the visibility and contrast of the tooltip, I added the following to my Custom CSS:
.tooltip>.tooltip-inner{background-color:#000;color:#FFF;border: 1px solid #581818;font-size: 14px; font-weight:700}

Accessibility Recommendation

To ensure the accessibility of the tooltip feature, I recommend that you only apply a tooltip to buttons or links only. This allows easier navigation for screen readers where they will most likely find the tool tip.

When creating a tool tip, you are adding the following attributes to a link or button:

data-placement="[top, bottom, left, right]"

This tells the javascript where you want the tool tip appear. Just choose one of the above options.

data-toggle="tooltip"

Provides the Tooltip functionality

title="What the tool tips says"

The title attribute becomes the text within your tooltip

<button type="button" class="btn btn-lib" data-toggle="popover" data-trigger="click" title="The Title within the Popover Element" data-content="Some more information concerning the topic of the button." data-placement="auto left">Select to learn more information.</button>

Required Script

For Popovers to work, you must place the following script either in your LibGuides' Custom JS/CSS (thus allowing tooltips on all pages) or somewhere else in your code for pages to have this feature:
<script>$(function () {$('[data-toggle="popover"]').popover()})</script>

When creating a tool tip, you are adding the following attributes to a link or button:

data-placement="[top, bottom, left, right, auto]"

This tells the javascript where you want the popover to appear. Counterintuitively, right means left, left means right, etc. with Popovers. Just choose one of the above options. You can combine auto with any of the directions to ensure that the popover doesn't go offscreen.

data-toggle="popover"

Provides the Popover functionality

data-trigger="click, hover, focus, manual"

This informs the javascript when to trigger the popover based on the above events.

title="The title within the popover element"

The title attribute becomes the title found within the header of the popover.