Popovers and Tooltips with Vanilla JS

Using JavaScript for popovers and tooltips in Jekyll.

Popover

Regular text popover trigger.

The example above uses _includes/popovers.html:

<div>
    Regular text <span class="tip" onclick="return vanillaTip.click(this);">popover trigger</span>.
    <div class="popover top">
        <div class="arrow"></div>
        <div class="popover-content">
            
        </div>
    </div>
</div>

Here’s the resulting html:

<div>
    Regular text <span class="tip" onclick="return vanillaTip.click(this);">popover trigger</span>.
    <div class="popover top">
        <div class="arrow"></div>
        <div class="popover-content">
            Jekyll is a static site generator that builds sites using most modern web technologies. <a href="https://www.techopedia.com/definition/1320/canonical">source</a>
        </div>
    </div>
</div>

Finally, our JavaScript appends the popover and its content to the bottom of the page:

<!-- Style and Class data was written by popover.js -->
<div class="popover top popover-clone popover-clone" style="display: block; position: absolute; left: 10px; top: 238px;">
    <div class="arrow" style="left: 107.547px;"></div>
    <div class="popover-content">
        Jekyll is a static site generator that builds sites using most modern web technologies. <a href="https://www.techopedia.com/definition/1320/canonical">source</a>
    </div>
</div>

The resulting popover is styled according to instructions our .css file.

Tooltip

Basic

Hover here for text.

Hover here for a link with text.

Hover here for text with a title.

Advanced

Hover here for text and other options.

Hover here for title, text, and other options.

Kitchen sink example: hover here for title, text, and other options.

Post written on June 29, 2016
Post written on 2016-06-29 00:00:00 -0700