Bootstrap styling guide

HTML code and instructions for using the styles demonstrated in this 'topic'

Display

Tooltips

  HTML and javascript knowledge required.

What is it?

Tooltips can provide additional information to text or a button. They are an advanced element and require some javascript knowledge to correctly activate.

How can I use it?

Use a tooltip to add pop up information to text (viewable when the cursor is over the text or button).

You might want to say something about a term or other text, or use a button with a tooltip to let the user know why they would click on it. Note that a tooltip is text only – you cannot hyperlink.

How do I set it up?

Javascript first
  1. Select and copy all javascript in the 'Code for tooltip' javascript box (below).
  2. Select a module / resource and click on the cog to edit it, then click on the HTML icon in the Content box to go to the HTML editor.
  3. In the HTML editor, paste the javascript at the top.
  4. Click on Update to go back to the text editor screen.
  5. Click Save changes (you won't see anything different – javascript is 'invisible').
HTML code second
  1. Select the HTML code in the  'Code for tooltip' HTML box for either text or a button (below).
  2. Go back to the module / resource where you placed the javascript (instructions above). 
  3. In the HTML editor, paste the HTML code where you want the tooltip to appear.
  4. In the HTML editor, change the text to what you want it to say.
  5. Click on Update to go back to the text editor screen. 
  6. Click Save changes to view in the module / resource.
  7. Refresh the browser screen (browser toolbar) so the tooltip feature displays correctly.
Tooltip examples
Text example

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Button example

Code for tooltip

Tooltips require both HTML and javascript. An example of the HTML / javascript is given below.

HTML (for text)
<a href="#" data-toggle="tooltip" title="Tooltip text here" data-original-title="Default tooltip">text prompt for tooltip here</a>
HTML (for a button)
<div class="tooltip-demo">
<div class="bs-example-tooltips"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip text here" data-original-title="Tooltip on left">Button title here
</button> </div>
</div>
Javascript (all tooltip styles)

The following javascript enables tooltips for anything within a container (a <div> in the example above) with a class of '.tooltip-demo'. The javascript also specifies that the tooltip text can be found in a 'data-toggle' parameter.

<script type="text/javascript">// <![CDATA[
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body" }) // ]]></script>