# Striven Tooltip
> ℹ Tooltip UI used in the Striven ERP System

## Getting Started

Install the Striven Tooltip 

```sh
npm install @striven-erp/striven-tooltip
```

Initialize an instace of ```StrivenTooltip```

```js
import { StrivenTooltip } from '@striven-erp/striven-tooltip';

const stip = new StrivenTooltip('This is a tip', tooltipElement, { icon: true  });
```

### Knockout 

```js
import ko from 'knockout';
import { KoStrivenTooltip } from '@striven-erp/striven-tooltip';

new KoStrivenTooltip(ko);
```

### Template the binding

Attach the binding to the element that you want ```StrivenTooltip``` to be initialized with.

```html
<span data-bind="tooltip: tooltipConfig" />
```

### Example View Model

```js
function AppViewModel() {
  this.tooltipConfig = {
    tip: 'This is a tooltip!',
    icon: true
  }
}
```

## Build and Use

```sh
$ npx webpack --mode=production
```

```sh
$ mv dist/striventooltips.js ~/path/to/project
```

## Properties

|Property|Type|Default|Description|
|:-:|:-:|:-:|:-:|
|icon|```Boolean```|```false```|Whether to add the default icon or not|
|onShow|```Function```|```null```|Method called when the tooltip is shown|
|onHide|```Function```|```null```|Method called when the tooltip is hidden|

## Methods

|Method|Returns|Description|
|:-:|:-:|:-:|
|showTooltip|Nothing|Shows the tooltip|
|hideToolip|Nothing|Hides the tooltip|
|setTip(```String```)|Nothing|Sets the tip property and changes the content of the tooltip|