What's this

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

Installation

npm i smart-tooltip-angular --save

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

Getting Started

Import library to module

import { SmartTooltipAngularModule } from 'smart-tooltip-angular';

@NgModule({
  declarations: [
  ],
  imports: [
    SmartTooltipAngularModule
  ],
  providers: [],
  bootstrap: []
})

Html (index.html)

    <div smart-tooltip-container> 
                Button 
        <span class="smart-tooltip">Welcome</span>  
    </div>

Run your project

    ng serve 

options

• Forcing tooltip to stay at particatular position Apply class stay-left | stay-right | stay-bottom | stay-top eg:

    <div 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 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 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 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 *

    <button 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. NB: Having the stick-* class on the smart-tooltip element will hide it after the said (*) milliseconds

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