smart-tooltip-angular/README.md

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

# 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>
```
<!-- smart-tooltip supports 2 options all of which are optional
* *type * - _hard | soft_ (Defaults to soft) -->