Getting started

This is a tooltip component for VueJS 2.x

Note: The tooltip will automatically position itself based on the position of the hovered element in the page, as shown on the gif below:

1. Install the Component:

npm install --save v-poptool

2. Register the Component to your app:

import Vue from 'vue'
import Vtooltip from 'v-poptool'

components: {
    Vtooltip
}

Usage

1. Add the component wherever you need it.

<vtooltip>
    <div slot="content">This is what goes inside the tooltip</div>
    <div slot="tooltip-text">Hover over me</div>
</vtooltip>

Options

| Option | Description | Value | Default | |--------------------|------------------------------------------------------------------|------------------------|----------| | color | text color of the tooltip | String | #FFF | | backgroundColor | background color of the tooltip | String | #000 | | fontSize | font size of the tooltip | Number | 10 | | textAlign | text alignment within the tooltip | String | left | | arrowPlacement | position of the tooltip's arrow | String | left | | hOffset | horizontal offset of the tooltip | Number | 0 | | vOffset | vertical offset of the tooltip | Number | 0 | | arrowOffset | horizontal offset of the arrow | Number | 0 |

Options Example:

<vtooltip :options="{
	color: 'red',
    backgroundColor: '#DDD',
    fontSize: 16,
    textAlign: 'center',
    arrowPlacement: 'right',
    hOffset: 10,
    Voffset: 2,
    arrowOffset: 15
}">
    <div slot="content">This is a tooltip with custom options</div>
    <div slot="tooltip-text">Hover over me</div>
</vtooltip>

Build the example

Go to the examples folder and run npm run dev