vue2-tooltip-simple

A lightweight, JS focused tooltip component for vue2.

Installing / Getting started

Getting started is dead simple.

npm install --save vue2-tooltip-simple

Inside your component or view:

import Tooltip from 'vue2-tooltip-simple'

After installing and importing the package into your component, it is very simple to use. Simply pass in the ID of the element you would like to mount the tooltip to, and pass in the element you would like to show inside the tooltip as a slot.

// inside your component
<template>
  <div>
    <Tooltip
      :elementId="'my-div'"
      :mode="'hover'"
      :classes="'warning'"
    >
      <template v-slot:content>
        <p>This is the text I want to show on hover</p>
      </template>
    </Tooltip>

    <div id="my-div">
      <p>This is the element I want the tooltip to show over when I hover!</p>
    </div>
  </div>
</template>

<script>
import Tooltip from 'vue2-tooltip-simple'
export default {
  ...
  components: {
    ...
    Tooltip,
    ...
  }
}
</script>

This would result in:

Options

| Prop | Required | Type | Default | Details | | --------- | -------- | ------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | elementId | true | String | | The element that the tooltip will mount to | | classes | false | String | 'primary' | The style of the tooltip. Options are 'primary', 'info', 'warning', 'error' | | mode | false | String | 'hover' | The behavior of the tooltip. Options are 'hover', 'click'. 'hover' will detect when the cursor enters the bounding box of the element the tooltip is mounted to, and will follow the cursor. 'click' will only show on click, and position itself above the mounted element. |