v-title

Tooltip text for Vue.

# Installation

npm install --save v-title

import Vue from 'vue';
import VTitle from 'v-title';

Vue.use(VTitle);

# Usage

# dark

Click me to show code

<template>
  <button v-title="'ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG'">
    hover me!
  </button>
</template>

# light

Click me to show code

<template>
  <button v-title.light="'ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG'">
    hover me!
  </button>
</template>

# delay

Click me to show code

<template>
  <button v-title.delay="'ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG'">
    hover me!
  </button>
</template>

# delay-time

Click me to show code

<template>
  <button
    v-title.delay="'ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG'"
    title-delay-time="1000"
  >
    hover me and hold 1000ms!
  </button>
</template>

# max-width

Click me to show code

<template>
  <button
    v-title="'ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG'"
    title-max-width="100"
  >
    hover me!
  </button>
</template>

# trigger

Support mouseenter foucs click foucin.

Click me to show code

<template>
  <button
    v-title="'ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG'"
    title-trigger="click"
  >
    click me!
  </button>
</template>

# overflow

Only show when text overflow.

hover me! try toggle switch and hover me again!

overflow mode

Click me to show code

<template>
  <div>
    <p
      :class="{ 'text-ellipsis': overflowMode }"
      :style="{ width: overflowMode ? '90px' : 'auto' }"
      v-title.overflow="'ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG'"
    >
      hover me! try toggle switch and hover me again!
    </p>
    <label>
      overflow mode
      <input
        type="checkbox"
        :checked="overflowMode"
        @change="(e) => (overflowMode = e.target.checked)"
    /></label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      overflowMode: true,
    };
  },
};
</script>

<style>
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

# overflow + multiple

Only show when multi-line text overflow.

hover me! try toggle switch and hover me again!

overflow and multiple mode

Click me to show code

<template>
  <div>
    <p
      :class="{ 'text-ellipsis-2': overflowAndMultipleMode }"
      :style="{ width: overflowAndMultipleMode ? '90px' : 'auto' }"
      v-title.overflow.multiple="'ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG'"
    >
      hover me! try toggle switch and hover me again!
    </p>
    <label>
      overflow and multiple mode
      <input
        type="checkbox"
        :checked="overflowAndMultipleMode"
        @change="(e) => (overflowAndMultipleMode = e.target.checked)"
      />
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      overflowAndMultipleMode: true,
    };
  },
};
</script>

<style>
.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>

# placement

top    top-start    top-end
right  right-start  right-end
bottom bottom-start bottom-end
left   left-start   left-end
auto   auto-start   auto-end