Striven Tooltip

ℹ Tooltip UI used in the Striven ERP System

Getting Started

Install the Striven Tooltip

npm install @striven-erp/striven-tooltip

Initialize an instace of StrivenTooltip

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

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

Knockout

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.

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

Example View Model

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

Build and Use

$ npx webpack --mode=production

$ 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|