Popovers

Purpose

Users need to be able to access additional related information or functionality without a change in context.

Description

• Popovers are a cross between a dialog and a tooltip
• Popovers are smaller contextual dialogs that are generally triggered by a click
• They may or may not provide additional interactive controls
• Popovers display information or functionality related to a particular item or control
• Popovers can be dismissed via a close icon, clicking the control that opened it, or by clicking anywhere outside of the popover
• The amount of content in a popover should be relatively short, but they can be scrollable if necessary
• Popovers should be positioned based on the screen space available,

Use a popover instead of a tooltip or dialog when:

• You want a contextual relationship that a dialog can’t provide
• You need to provide relatively simple interactions
• You have more text/content than can comfortably fit in a tooltip

<div class="popover left">
    <div class="arrow"></div>
    <h3 class="popover-title">Add note</h3>
    <div class="popover-content">
        <textarea placeholder="Enter note here" class="form-control" name="" id="" rows="3"></textarea>
    </div>
    <div class="popover-toolbar">
        <button class="btn btn-hover btn-icon-only"><i class="icon icon-image"></i><span class="sr-only">Add image</span></button>
        <button class="btn btn-hover btn-icon-only"><i class="icon icon-chain"></i><span class="sr-only">Add link</span></button>
        <button class="btn btn-primary pull-right">Add</button>
    </div>
</div>