Popovers and Tooltips

Contents

Popovers

Used to provide additional context or inline help when necessary. See the bootstrap popover docs for more options. Also, make sure the popover method is being called. Unless the options are re-used often, use data attributes rather than specifying them in javascript. The same styles are also used for Joyride tours.



<i class="icon-help" rel="popover" data-toggle="popover" data-trigger="hover" data-title="Roles" data-html="true" data-content="The <strong>Account Owner</strong> is an Administrator with access to billing and plan information <br><br><strong>Administrators</strong> can create new users and have access to all mailboxes and settings <br><br><strong>Users</strong> have access to the mailbox(es) specified in their permissions"></i>
<br><br>
<input type="text" name="name" id="name" class="input-helper" data-trigger="focus" data-content="This is some inline help that will only show on :focus. How cool is that?">
<script>
 $("[rel='popover']").popover();
 $(".input-helper").popover();
</script>

Tooltips

The javascript is available in common.js, but has to be called in Backbone apps.

Hover for a tooltip
<a href="#" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title="This is helpful stuff">Hover for a tooltip</a>
<button class="btn" rel="tooltip" data-toggle="tooltip" data-placement="right" title="This is helpful stuff">Hover me please</button>
<script>
  $("[rel=tooltip]").tooltip({
    delay: { show: 600, hide: 100 }
  });
</script>