vue-basic-tooltip

a basic vuejs based tooltip

Install

npm install --save-dev vue-basic-tooltip

Usage

import Vue from 'vue'
import { Tooltip } from 'vue-basic-tooltip'

Vue.component('v-tooltip', Tooltip)

or

<template>
	<div id="app">
		<button class="button">
			<v-tooltip initText="Hello World!">
				Click me
			</v-tooltip>
		</button>
	</div>
</template>

<script>
import { ToolTip } from 'vue-basic-tooltip'

export default {
	components: {
		'v-tooltip': ToolTip
	},
	data: function() {
		return {
			...
		}
	}
}
</script>

Example

Custom text size

<button class="button">
	<v-tooltip initText="Hello World!" textSize="24">
		Hover me
	</v-tooltip>
</button>

Custom text color

<button class="button">
	<v-tooltip initText="Hello World!" textSize="24" textColor="#000">
		Hover me
	</v-tooltip>
</button>

Custom box color

<button class="button">
	<v-tooltip initText="Hello World!" textSize="24" textColor="#000" boxColor="#FF69B4">
		Hover me
	</v-tooltip>
</button>

Available Options

| Props | Type | Values | default | | :---: | :---: | :---: | :---: | | initText | String | text to display | | | textSize | Number | 0 - 100 | 14 | | textColor | String | Color | #FFFFFF | | boxColor | String | Color | #33CC99 |