smart-tooltip

Intelligently show tooltip based on container position

Usage no npm install needed!

<script type="module">
  import smartTooltip from 'https://cdn.skypack.dev/smart-tooltip';
</script>

README

What's this

A package that allows you tooltip to show intelligently base on where it is

Installation

npm i smart-tooltip --save

optionally run npm init -y

Make sure your plugin is always up to date for more stability

Bundling your app

Html (index.html)

<head>
    <link rel="stylesheet" href="node_modules/smart-tooltip/main.css">
</head>
<body>
    <div class="smart-tooltip-container" > 
                Button 
        <span class="smart-tooltip">Welcome</span>  
    </div>
</body>
<script src="yourscript.js"></script>

Javascript (yourscript.js)

    import {smartTooltip} from "smart-tooltip";

    smartTooltip();

Bundling with Parcel (optional)

    run npm i parcel -g

    parcel index.html

options

  • Forcing tooltip to stay at particular position _ Apply class stay-left | stay-right | stay-bottom | stay-top _ eg:
    <div class="smart-tooltip-container" > 
                Button 
        <span class="smart-tooltip stay-right">Welcome</span>  
    </div>
  • Have you run into the trouble of having your tooltip cut because of a parent container overflowed hidden? Dont worry, just add the class overlay eg:
    <div class="smart-tooltip-container" > 
                Button 
        <span class="smart-tooltip stay-right overlay">Welcome</span>  
    </div>

NB: TO PREVENT TROUBLES WITH OVERLAY .. PLEASE SPECIFY DEFINITE WITDH FOR TOOLTIP NOTE: The Tooltip overlay will not work in a parent with transfrom property yet because of how css works (fixed position and transformed parent)... working on a fix for that soon

  • Do you want the tooltip stick around for a while...? Add the stick class with the time in milliseconds (stick-100) you want it to stay.

     <button class="smart-tooltip-container">
        Button 
        <span class="smart-tooltip overlay stick-200">Tooltip</span>
    </button>

    Or may be you want to tooltip to stick around until you click anywhere else .. in that case just add the stick class eg:

     <button class="smart-tooltip-container">
        Button 
        <span class="smart-tooltip overlay stick">Tooltip</span>
    </button>

    Force the tooltip to stay on Hover Even if stick time has expired, add 'stayonhover' class NB: Stay on hover works well when the "stick" or "stick-" class is used*

     <div class="smart-tooltip-container">
        Button 
        <span class="smart-tooltip stay-bottom overlay stick-2000 stayonhover">Tooltip</span>
    </div>

  • You can also use smart-tooltip as a dropdown.. just add the 'clicktoshow' class to the smart-tooltip-container.

     <button class="smart-tooltip-container clicktoshow">
            Button 
            <span class="smart-tooltip overlay">Tooltip</span>
        </button>

*Feel free to clone the github repo and import main.css and index.js to your project