Skip to main content

Using Bootstrap in LibGuides

LibGuides is built upon Bootstrap, a framework of CSS, JavaScript, and HTML. Librarians can increase the usability and functionality of their guides with Bootstrap’s components without the need of extensive web development experience.

Introduction

Popovers and tooltips provide further information on an element when the user clicks (popover) or hovers (tooltip).

Tooltips

Tooltips provide further information when a user hovers or tabs to a button or link. Hover or tab into the following buttons to see the behavior:

Code and Examples

Button Example Code
<button class="btn btn-lib" data-placement="left" data-toggle="tooltip" title="Left" type="button">Exit Stage...</button>
<button class="btn btn-lib" data-placement="right" data-toggle="tooltip" title="Right" type="button">Exit Stage...</button>
<button class="btn btn-lib" data-placement="top" data-toggle="tooltip" title="This high" type="button">How high?</button>
<button class="btn btn-lib" data-placement="bottom" data-toggle="tooltip" title="This low" type="button">How low?</button>

Notes

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.

Explanation of Code

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

Popovers

Popovers function like tooltips but require the user to click or otherwise activate the popover with a button or link:

Example and Code

 

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

Notes

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>

Explanation of Code

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.

For Further Information

Tooltips

For further information on Tooltips, please see the following websites:

Popovers

For further information and options concerning Popovers, please see the following websites: