Vue Basic Tooltip
a basic vuejs based tooltip
# Installation
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 |