tooltipster-scrollabletip

A Tooltipster plugin to make tooltips scrollable rather than have them overflow the viewport.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
tooltipster-scrollabletip
421.0.08 years ago8 years agoMinified + gzip package size for tooltipster-scrollabletip in KB

Readme

tooltipster-scrollableTip
A Tooltipster plugin to make tooltips scrollable when they get too big. MIT license.
When the tooltip is about to overflow the viewport, this plugin does the following: put the tooltip on the side which maximizes its size, resize it so it doesn't overflow the viewport, and make it scrollable for the content to be accessible.
The tooltip will go off screen only if the origin itself goes off screen.

Installation

Include the plugin file in your page AFTER the Tooltipster bundle file.
<html>
    <head>
        ...
        <script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
        <script type="text/javascript" src="tooltipster-scrollableTip/tooltipster-scrollableTip.min.js"></script>
    </head>
</html>

This plugin only works in conjunction with Tooltipster's default sideTip plugin.

Usage

Declare the scrollableTip plugin in the options of the tooltips you want to be scrollable, alongside sideTip:
$('.tooltip').tooltipster({
    plugins: ['sideTip', 'scrollableTip']
});

Pro tip: for a better style, know that the scrollbar is customizable with CSS in Chrome

Simple as that!