vue2-hints

Vue2Hints

Vue Component for Vue 2.x

Install

    npm install vue2-hints --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2Hints from 'vue2-hints';

2.1 Use it globally

Vue.use(Vue2Hints);

// OR with options

Vue.use(Vue2Hints, {baseURL: 'https://jsonplaceholder.typicode.com/', headers: {'X-API-KEY': 1234}});

*3. Access it locally

<template>
    <vue2-hints ref="http" v-model="data" :error-fn="onError"></vue2-hints>
</template>

components: {
    'vue2-hints': Vue2Hints
},

Properties

Example

<template>
    <div id="app">
        <div class="d-flex flex-column justify-content-between" style="height: 400px;">
            <button class="btn btn-primary btn-sm" type="button" v-hint="'simple tooltip'" :sanchit="show">tooltip</button>
            <button class="btn btn-primary btn-sm" type="button" v-hint.html="'<b>simple</b> tooltip'" :sanchit="show">html tooltip</button>
            <button class="btn btn-primary btn-sm" type="button" v-hint="{title: 'this is a tooltip', show: show, placement: 'bottom'}" :sanchit="show">prog tooltip</button>
            <button class="btn btn-primary btn-sm" type="button" @click="test" v-hint.popover="'this is a popover'">popover</button>
            <button class="btn btn-primary btn-sm" type="button" @click="test" v-hint.popover="{title: 'my title', content: 'my content'}">popover title and content</button>

            <hr>

            <button class="btn btn-primary btn-sm" type="button" @click="show = !show">!show</button>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import Vue2Hints from '../src/index'

    Vue.use(Vue2Hints, {});

    export default {
        name: 'app',
        data() {
            return {
                data: {},
                show: true,
            }
        },
        methods: {
            test() {
                // code
            }
        },
    }
</script>

Contributing

Contributions are welcome

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build