CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-v-tooltip

Easy tooltips, popovers and dropdowns for Vue 2.x with Popper.js integration

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

v-tooltip

v-tooltip provides easy-to-use tooltips, popovers, and dropdowns for Vue 2.x applications with Popper.js integration. It offers both directive-based and component-based approaches for creating interactive tooltips with extensive customization options, positioning control, and support for complex content including Vue components.

Package Information

  • Package Name: v-tooltip
  • Package Type: npm
  • Language: JavaScript (Vue.js 2.x)
  • Installation: npm install v-tooltip

Core Imports

import Vue from 'vue';
import VTooltip from 'v-tooltip';

Vue.use(VTooltip);

For direct imports:

import { VTooltip, VPopover, VClosePopover } from 'v-tooltip';

Vue.directive('tooltip', VTooltip);
Vue.directive('close-popover', VClosePopover);
Vue.component('v-popover', VPopover);

For browser usage:

<script src="https://unpkg.com/v-tooltip@^2.0.0"></script>
<script>
// Auto-installs if Vue is detected globally
// Or manually install:
Vue.use(VTooltip);
</script>

Basic Usage

<template>
  <div>
    <!-- Simple tooltip -->
    <button v-tooltip="'Hello World!'">Hover me</button>
    
    <!-- Popover with content -->
    <v-popover>
      <button>Click me</button>
      <template slot="popover">
        <h3>Popover Title</h3>
        <p>Complex content goes here</p>
      </template>
    </v-popover>
  </div>
</template>

Architecture

v-tooltip is built around several key components:

  • Plugin System: Vue.use() installation with global configuration options
  • Directive API: v-tooltip directive for simple tooltip functionality
  • Component API: VPopover component for complex interactive content
  • Core Tooltip Class: Low-level tooltip implementation with Popper.js integration
  • Configuration System: Global and per-instance options for comprehensive customization
  • Event Management: Support for hover, focus, click, and manual triggers
  • Positioning Engine: Popper.js integration for intelligent positioning

Capabilities

Tooltip Directive

Simple tooltip functionality using the v-tooltip directive. Supports string content, positioning modifiers, and configuration objects.

// Basic string tooltip
v-tooltip="tooltipContent"

// With positioning modifier
v-tooltip.bottom-start="tooltipContent"

// With configuration object
v-tooltip="{ content: 'text', placement: 'top', delay: 500 }"

Tooltip Directive

Popover Component

Advanced popover functionality with Vue component slots for complex interactive content.

// Component registration
Vue.component('v-popover', VPopover);

// Component props
interface VPopoverProps {
  open?: boolean;
  disabled?: boolean;
  placement?: string;
  delay?: string | number | object;
  trigger?: string;
  // ... additional props
}

Popover Component

Global Configuration

System-wide configuration options for default behavior and styling.

// Plugin options during installation
Vue.use(VTooltip, options);

// Direct configuration
VTooltip.options.defaultClass = 'my-tooltip';
VTooltip.enabled = window.innerWidth > 768;

Global Configuration

Low-Level Tooltip API

Direct access to the underlying Tooltip class for advanced use cases.

import { createTooltip, destroyTooltip } from 'v-tooltip';

function createTooltip(el: HTMLElement, value: any, modifiers?: object): Tooltip;
function destroyTooltip(el: HTMLElement): void;

Low-Level API

Types

interface DelayConfig {
  show?: number;
  hide?: number;
}

interface VTooltipPlugin {
  install(Vue: any, options?: Partial<GlobalVTooltipOptions>): void;
  enabled: boolean;
  options: GlobalVTooltipOptions;
}

interface GlobalVTooltipOptions {
  defaultPlacement: string;
  defaultClass: string;
  defaultTargetClass: string;
  defaultHtml: boolean;
  defaultTemplate: string;
  defaultArrowSelector: string;
  defaultInnerSelector: string;
  defaultDelay: number | DelayConfig;
  defaultTrigger: string;
  defaultOffset: number | string;
  defaultContainer: string | HTMLElement | false;
  defaultBoundariesElement: string | HTMLElement;
  defaultPopperOptions: any;
  defaultLoadingClass: string;
  defaultLoadingContent: string;
  autoHide: boolean;
  defaultHideOnTargetClick: boolean;
  disposeTimeout: number;
  popover: Partial<GlobalVTooltipPopoverOptions>;
}

interface GlobalVTooltipPopoverOptions {
  defaultPlacement: string;
  defaultClass: string;
  defaultBaseClass: string;
  defaultWrapperClass: string;
  defaultInnerClass: string;
  defaultArrowClass: string;
  defaultOpenClass: string;
  defaultDelay: number | DelayConfig;
  defaultTrigger: string;
  defaultOffset: number | string;
  defaultContainer: string | HTMLElement | false;
  defaultBoundariesElement: string | HTMLElement;
  defaultPopperOptions: any;
  defaultAutoHide: boolean;
  defaultHandleResize: boolean;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/v-tooltip@2.1.x
Publish Source
CLI
Badge
tessl/npm-v-tooltip badge