Project Lima pattern lib

Tooltips: Bottom 

<div class="grid grid--container">
    <div class="row">
        <div class="col col--xs-6 col--xs-offset-3">
            <h1>Tooltips</h1>
            <p><span class="b-tooltip b-tooltip--bottom js-tooltip" role="tooltip"><span class="b-tooltip__text">Bottom</span><span class="b-tooltip__message" aria-hidden="true" tabindex="-1">Bottom</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>Tooltips</h1>
            <p><span class="b-tooltip{{ 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--bottom",
  "identifier": "Bottom"
}

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

Tooltips will be opened by a click on touch screen devices and everything else as a hover.