A Tooltipster plugin to make tooltips scrollable when they get too big
JavaScript HTML
Latest commit 7ffe94d Nov 16, 2016 @louisameline Compatibility note

README.md

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.

Compatibility

This plugin works well in Chrome (PC, Android), Firefox and IE10+. As Safari (Mac, iPhone, iPad) and IE9 and lower have an incomplete/buggy support of the display: flex CSS property, this plugin will not behave as expected. See issue #1

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!