Project Lima pattern lib

Popovers: Left 

<div class="grid grid--container">
    <div class="row">
        <div class="col col--xs-6 col--xs-offset-3">
            <h1>Popovers</h1>
            <p><span class="b-tooltip b-tooltip--popover b-tooltip--left js-tooltip" role="tooltip"><span class="b-tooltip__text">Left</span><span class="b-tooltip__message" aria-hidden="true" tabindex="-1">Left</span></span>
            </p>
        </div>
    </div>
</div>
 
<div class="grid grid--container">
    <div class="row">
        <div class="col col--xs-6 col--xs-offset-3">
            <h1>Popovers</h1>
            <p><span class="b-tooltip b-tooltip--popover{{ modifier }} js-tooltip" role="tooltip"><span class="b-tooltip__text">{{ identifier }}</span><span class="b-tooltip__message" aria-hidden="true" tabindex="-1">{{ identifier }}</span></span></p>
        </div>
    </div>
</div>
 
{
  "name": " Top",
  "modifier": " b-tooltip--left",
  "identifier": "Left"
}

Tooltips and popovers are inline elements, and they can be on virtually anything (I wuld suggest just text or icons).

Popovers will work nearly the same as tooltips, the first difference being that they will always open with a click (no hovers). Secondly they can hold more content than a tooltip.

The reason to use these over tooltips is to add titles and images (more than just text of a tooltip). These extras are not styles as they will be dependant on each design.