---
layout: default
---

    <div id="banner">
        <header>
            <h2>Vue Directive Tooltip</h2>
            <h4>a directive for Vue.js</h4>
        </header>
    </div>

<!-- installation -->
    <section id="installation">
        <div class="container">
            <header class="major">
                <h3>Installation</h3>
            </header>
            
            <h4>Using Webpack, Rollup, etc...</h4>
            <p>
                <code>Vue.use()</code> is called from the script, so you don't need to care about it.
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc install-webpack.js %}
            </div>
            
            <h4>Using script tag</h4>
            <p>
                When using ES5, don't forget to copy the css.
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc install-script.html %}
            </div>
        </div>
    </section>

<!-- usage -->
    <section id="usage">
        <div class="container">
            <header>
                <h3>Usage</h3>
            </header>
            
            <h4>Basic</h4>
            <p>
                Example: <a href="#" @click.prevent v-tooltip="'basic one'">Tooltip</a>
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc basic.vue %}
            </div>
            <p>
                Please be careful of the <strong>single quotes</strong> inside the <strong>double quote</strong>.
            </p>
            
            <h4>Using an options object</h4>
            <p>
                Example: <a href="#" @click.prevent v-tooltip="{ content: 'options object' }">Tooltip</a>
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc basic-options.vue %}
            </div>
            
            <h4>Referencing and HTML element</h4>
            <p>
                Example: <a href="#" @click.prevent v-tooltip="{ html: 'tooltipContent' }">the target is an html element</a>
            </p>
            <div id="tooltipContent">
                <span>this content is in an <strong>HTML</strong> tag</span>
            </div>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc basic-options-html.vue %}
            </div>
        </div>
    </section>

<!-- positioning -->
    <section id="positioning">
        <div class="container">
            <header>
                <h3>Positioning</h3>
            </header>
            
            <p>
                4 different positions are available: bottom (default) | top | left | right
            </p>
            <p>
                Default positioning: <a href="#" @click.prevent v-tooltip="'bottom'">bottom tooltip</a>
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc positioning-default.vue %}
            </div>
            <p>
                Top positioning: <a href="#" @click.prevent v-tooltip.top="'top'">top tooltip</a>
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc positioning-top.vue %}
            </div>
            <p>
                Left positioning: <a href="#" @click.prevent v-tooltip.left="'left'">left tooltip</a>
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc positioning-left.vue %}
            </div>
            <p>
                Right positioning: <a href="#" @click.prevent v-tooltip.right="'right'">right tooltip</a>
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc positioning-right.vue %}
            </div>
        </div>
    </section>

<!-- events/triggers -->
    <section id="events-triggers">
        <div class="container">
            <header>
                <h3>Events / Triggers</h3>
            </header>
            
            <p>
                There are several options to trigger the display of the tooltip: <br>
                you can use a combination of these keywords: click | hover | focus
            </p>
            <p>
                single event: <a href="#" @click.prevent v-tooltip.click="'Show on: click'">click trigger</a>
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc triggers-click.vue %}
            </div>
            <p>
                or even a combination: <a href="#" @click.prevent v-tooltip.hover.focus="'Show on: hover.focus'">hover.focus triggers together</a>
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc triggers-combination.vue %}
            </div>
            <p>
                By the default, the <code>click</code> trigger will close when clicking anywhere on the page. <br>
                In case you want the tooltip to close when clicking again on the same element, there is an extra option.
                click event: <a href="#" @click.prevent v-tooltip.click.manual="'click + manual trigger'">click + manual trigger</a>
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc triggers-click-manual.vue %}
            </div>
        </div>
    </section>

<!-- programmatic -->
    <section id="programmatic">
        <div class="container">
            <header>
                <h3>Programmatic</h3>
            </header>
            
            <p>
                If you do not want to use triggers and manage the tooltip visibility through Vue, you can! <br>
                For that, you need to use the modifier <code>.notrigger</code> + the options object attribute <code>visible</code> <br>
                <code>&lt;a v-tooltip.notrigger="{ content: '...', visible: visibility }"</code>
            </p>
            <p>
                <a @click.prevent v-tooltip.right.notrigger="{ content: 'change the visibility', visible: visibility }">change the visibility with the button below</a><br>
                <button @click="visibility = !visibility">
                    <span v-if="visibility">hide tooltip</span>
                    <span v-else>show tooltip</span>
                </button>
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc programmatic.vue %}
            </div>
        </div>
    </section>

<!-- custom css / class -->
    <section id="custom-css">
        <div class="container">
            <header>
                <h3>Custom css / class</h3>
            </header>
            
            <p>
                Let's personalize a bit this tooltip! <br>
                Wants some red? Here is how you do it.
            </p>
            <p>
                Example: <a @click.prevent v-tooltip="{ content: 'custom class', class: 'tooltip-custom tooltip-other-custom' }">tooltip appearance</a>
            </p>
            <p>
                1. add somewhere in your css file the classes that you want to use. <br>
                Let's say... <code>.tooltip-custom</code>
            </p>
            <p>
                We have to account for the arrow color also depending on the tooltip's position.
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc custom-css.css %}
            </div>
            <p>
                2. in your directive options object, specify your css class name(s)
            </p>
            <div>
                {% gist hekigan/a614757bc63f85fd0401c95e16cf96cc custom-css.vue %}
            </div>
        </div>
    </section>