How to use v-tooltip - 10 common examples

// @ts-ignore
require.context('../icons', true);

if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: process.env.SENTRY_DSN_JS,
    integrations: [
      new VueIntegration({ Vue, attachProps: true })
    ],
    environment: process.env.NODE_ENV
  });
}

Vue.use(TurbolinksAdapter);
Vue.use(VTooltip);
VTooltip.enabled = window.innerWidth > 768;

Rails.start();
Turbolinks.start();
ActiveStorage.start();

/* eslint-disable no-new */
    charts[elementName] = new RadialProgressChart(elementName, { diameter: 100,
      min: 0,
      max: 100,
      series: data,
      center: handleCenterText(textValue, textIndexToUse),
    });
  } else {
    e.update(data);
  }
  const opt = {};
  opt.value = tooltip;
  opt.modifiers = ['top-right'];

  const ele = d3.select(elementName).node();
  VTooltip.bind(ele, opt);

  /* The next block of code digs into the SVG and sets the opacity of either
     the daily arc and/or the weekly arc to 0 (hides) if the model specifies either
     a monthly or weekly target. IF weekly target is set, only the arc for weekly and
     monthly is displayed. If a monthly target is set, only the arc for the monthly
     is visible.
   */
  if (!useDaily) {
    const svg = d3.select(elementName).select('svg');
    const pg = svg.select('g');
    pg.selectAll('g').each(function u(p, i) {
      const uw = useWeekly;
      if (i === 0) {
        d3.select(this).style('opacity', 0.0);
      }
      if (i === 1 && !uw) {

import { HandleDirective } from 'vue-slicksort';
Vue.directive('sort-handle', HandleDirective);

// https://github.com/rigor789/vue-scrollto
import VueScrollTo from 'vue-scrollto';
Vue.use(VueScrollTo, {
    container: 'main',
});

// https://github.com/katlasik/mime-matcher
import MimeMatcher from 'mime-matcher';
Vue.prototype.MimeMatcher = MimeMatcher;

// https://github.com/Akryum/v-tooltip
import { VTooltip } from 'v-tooltip';
VTooltip.options.defaultPlacement = 'bottom';
Vue.directive('tooltip', VTooltip);

import 'vueleton/lib/dropdown.css';
import { ClientTable } from 'vue-tables-2';
import moment from 'moment';
import DynamoDb from 'aws-sdk/clients/dynamodb';
import { VTooltip } from 'v-tooltip';
import * as d3 from 'd3';
import model from '../assets/TrackingBotModel.json';
import StackedBar from './StackedBar';
import Logger from '../logger';

/* Stores RadialProgressChart instances to use on updates */
const charts = {};

/* eslint-disable no-new, no-alert, max-len, no-loop-func */

VTooltip.options.defaultClass = 'my-tooltip';
Vue.component('detail-chart', StackedBar);
Vue.component('dropdown', Dropdown);
Vue.use(ClientTable, {
},
);

/* eslint-disable no-var, no-plusplus */

/* Computes text value to use for center of radial chart
   This value will be updated as data for the radial chart is also
   updated. The center of the chart shows a text value that corresponds to the
   current day, or week, and/or monthly percentage. If a daily target is
   specified, then the center text represents the percent complete for each
   day. if a weekly target is specified, the center text is a percent completed
   for the week. if a monthly target is specified, the center text is a percent
   complete for the month.

if (params[0] instanceof Error) {
        scope.setExtra('exception', params[0].stack);
      }

      scope.setExtra('console-args', JSON.stringify(params, null, 2));
      Sentry.captureMessage(msg, Sentry.Severity.Error);
    });
  };
}

require('./app.g.less');
require('./themes.g.less');

// Initiates tooltips and sets their parent wrapper
Vue.use(VTooltip);
VTooltip.options.defaultContainer = '#mainWrapper';
Vue.use(Toasted);
Vue.use(VeeValidate); // form validations
Vue.use(VModal);

// Disable chrome default drag/drop behavior
document.addEventListener('dragover', event => event.preventDefault());
document.addEventListener('dragenter', event => event.preventDefault());
document.addEventListener('drop', event => event.preventDefault());

export const apiInitErrorResultToMessage = (resultCode: obs.EVideoCodes) => {
  switch (resultCode) {
    case obs.EVideoCodes.NotSupported: {
      return $t('OBSInit.NotSupportedError');
    }
    case obs.EVideoCodes.ModuleNotFound: {
      return $t('OBSInit.ModuleNotFoundError');

import AppBackdrop from '../backdrop/backdrop.vue';
import { Screen } from '../screen/screen-service';
import AppScrollScrollerTS from '../scroll/scroller/scroller';
import AppScrollScroller from '../scroll/scroller/scroller.vue';
import './popper.styl';

const mod: any = require('v-tooltip');

// Sync with the styles files.
const TransitionTime = 200;

let PopperIndex = 0;

@Component({
	components: {
		VPopover: mod.VPopover,
		AppScrollScroller,
	},
})
export default class AppPopper extends Vue {
	@Prop({ type: String, default: 'bottom' })
	placement!: 'top' | 'right' | 'bottom' | 'left';

	@Prop({ type: String, default: 'click' })
	trigger!: 'click' | 'hover' | 'manual';

	/**
	 * By default the popper will stay on the page until the user clicks outside
	 * of the popper. This tells the popper to close anytime the state changes.
	 * Useful for poppers in the shell that link to other pages on the site.
	 */
	@Prop(Boolean)

import { DirectiveOptions } from 'vue';
import './tooltip.styl';

let AppTooltip: DirectiveOptions = {};
if (!GJ_IS_SSR) {
	const mod: any = require('v-tooltip');
	const VTooltip: any = mod.default;
	AppTooltip = mod.VTooltip;

	// Allows the tooltip to float above any scroll boundaries, otherwise it may not position
	// correctly for things with overflow:hidden.
	(AppTooltip as any).options.defaultBoundariesElement = document.body;

	// Hide on mobile sizes.
	VTooltip.enabled = window.innerWidth > 768;
}

export { AppTooltip };

import { DirectiveOptions } from 'vue';
import './tooltip.styl';

let AppTooltip: DirectiveOptions = {};
if (!GJ_IS_SSR) {
	const mod: any = require('v-tooltip');
	const VTooltip: any = mod.default;
	AppTooltip = mod.VTooltip;

	// Allows the tooltip to float above any scroll boundaries, otherwise it may not position
	// correctly for things with overflow:hidden.
	(AppTooltip as any).options.defaultBoundariesElement = document.body;

	// Hide on mobile sizes.
	VTooltip.enabled = window.innerWidth > 768;
}

export { AppTooltip };

import SceneSelector from 'components/SceneSelector.vue';
import Mixer from 'components/Mixer.vue';
import { UserService } from 'services/user';
import { Inject } from 'services/core/injector';
import Display from 'components/shared/Display.vue';
import { CustomizationService } from 'services/customization';
import VTooltip from 'v-tooltip';
import { $t, I18nService } from 'services/i18n';
import { NavigationService } from 'services/navigation';
import ResizeBar from 'components/shared/ResizeBar.vue';
import { WindowsService } from 'services/windows';
import electron from 'electron';
import BrowserView from 'components/shared/BrowserView';

Vue.use(VTooltip);
VTooltip.options.defaultContainer = '#mainWrapper';

@Component({
  components: {
    SceneSelector,
    Mixer,
    Display,
    ResizeBar,
    BrowserView,
  },
})
export default class Live extends Vue {
  @Inject() userService: UserService;
  @Inject() customizationService: CustomizationService;
  @Inject() i18nService: I18nService;
  @Inject() navigationService: NavigationService;
  @Inject() windowsService: WindowsService;