CSS

To customize the style of your poppers, you have many CSS classes available.

Theme classes

Each theme has a corresponding CSS class:

(themeName) => `v-popper--theme-${themeName}`

For example, the info-tooltip theme will have the CSS class v-popper--theme-info-tooltip.

If a theme extends another theme, the CSS class of this parent theme will also be included. For example:

Vue.use(VTooltip, {
  themes: {
    'info-tooltip': {
      $extend: 'tooltip',
    },
  },
})

The themeClasses will be:

[
  'v-popper--theme-info-tooltip',
  'v-popper--theme-tooltip',
]

This works for any level of inheritance:

Vue.use(VTooltip, {
  themes: {
    'info-tooltip': {
      $extend: 'tooltip',
    },
    'other-tooltip': {
      $extend: 'info-tooltip',
    }
  },
})

The themeClasses will be:

[
  'v-popper--theme-other-tooltip',
  'v-popper--theme-info-tooltip',
  'v-popper--theme-tooltip',
]

You can prevent a theme from including the parent classes with $resetCss:

Vue.use(VTooltip, {
  themes: {
    'info-tooltip': {
      $extend: 'tooltip',
      $resetCss: true,
    },
  },
})

The themeClasses will be:

[
  'v-popper--theme-info-tooltip',
]

Main content

By default, the popper components will have the v-popper class plus the associated themeClasses.

Dynamic class:

• v-popper--shown: when the popper is shown.

HTML result:

<div class="v-popper"> <!-- themeClasses, 'v-popper--shown' -->
  <!-- Default slot -->
</div>

Popper content

By default, multiple elements are mounted in the popper content:

• popper: the root element of the popper. This will be positioned by popperjs.
  • wrapper: an intermediary element to allow transforming both the content and the arrow (useful for zoom transitions).
    • inner: the main popper content. Ideal target for main styles such as background, border, text color...
    • arrow-container: contains the arrow graphics. This will be positioned by popperjs.
      • arrow-outer: the bigger arrow. Visible by default. If you want a border, should use the border color - otherwise, should use the background color.
      • arrow-inner: the smaller arrow, useful to simulate a border. Hidden by default. The default dropdown theme makes it visible to display the default border. Should use the background color.

HTML result:

<div class="v-popper__popper"> <!-- themeClasses,
                                    props.popperClass,
                                    'v-popper__popper--shown',
                                    'v-popper__popper--hidden',
                                    'v-popper__popper--skip-transition',
                                    'v-popper__popper--arrow-overflow',
                                    'v-popper__popper--no-positioning',
                                    'v-popper__popper--show-from',
                                    'v-popper__popper--show-to',
                                    'v-popper__popper--hide-from',
                                    'v-popper__popper--hide-to' -->
  <div class="v-popper__wrapper">
    <div class="v-popper__inner">
      <div>
        <!-- Popper slot -->
      </div>
    </div>

    <div class="v-popper__arrow-container">
      <div class="v-popper__arrow-outer" />
      <div class="v-popper__arrow-inner" />
    </div>
  </div>
</div>

You probably want to put a default padding on all dropdowns and menus:

.v-popper--theme-dropdown .v-popper__inner {
  padding: 6px;
}

The popper element has several dynamic classes:

• v-popper__popper--shown: the popper is shown.
• v-popper__popper--hidden: the popper is hidden.
• v-popper__popper--skip-transition: the transition should be skipped.
• v-popper__popper--arrow-overflow: the arrow is overflowing past the reference, and should probably be hidden.
• v-popper__popper--no-positioning: positioning is disabled with positioningDisabled prop.

Full example style:

.v-popper--theme-my-theme .v-popper__inner {
  background: #fff;
  color: black;
  padding: 24px;
  border-radius: 6px;
  border: 1px solid #ddd;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .1);
}

.v-popper--theme-my-theme .v-popper__arrow-inner {
  visibility: visible;
  border-color: #fff;
}

.v-popper--theme-my-theme .v-popper__arrow-outer {
  border-color: #ddd;
}

/* Transition */

.v-popper--theme-my-theme.v-popper__popper--hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s, visibility .15s;
}

.v-popper--theme-my-theme.v-popper__popper--shown {
  visibility: visible;
  opacity: 1;
  transition: opacity .15s;
}

.v-popper--theme-my-theme.v-popper__popper--skip-transition {
  transition: none !important;
}

Advanced transitions

The popper element also has dynamic classes working similarly to the Vue transition system:

• v-popper__popper--show-from: (for advanced transition) initial style when shown.
• v-popper__popper--show-to: (for advanced transition) final style when shown.
• v-popper__popper--hide-from: (for advanced transition) initial style when hidden.
• v-popper__popper--hide-to: (for advanced transition) final style when hidden.

They allow you to create advanced transitions.

Showing:

Class	Frame 1	Frame 2
v-popper__popper--show-from	true	false
v-popper__popper--show-to	false	true
v-popper__popper--hidden-from	false	false
v-popper__popper--hidden-to	false	false

Hidding:

Class	Frame 1	Frame 2
v-popper__popper--show-from	false	false
v-popper__popper--show-to	false	false
v-popper__popper--hidden-from	true	false
v-popper__popper--hidden-to	false	true

Zoom show only example

<VDropdown compute-transform-origin />

.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper {
  transform: scale(.5);
}

.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
  transform: none;
  transition: transform .15s;
}

Tooltip directive

The v-tooltip directive adds the v-popper--has-tooltip to the target element. For example:

<button v-tooltip="'Some info'">
  Click me
</button>

Result:

<button class="v-popper--has-tooltip">
  Click me
</button>

The popper content root element also has the following dynamic classes:

• v-popper--tooltip-loading: the tooltip content is loading (when the content is a function that returns a promise). Example result:

<div class="v-popper__popper v-popper--tooltip-loading">
  <div class="v-popper__wrapper">
    <div class="v-popper__inner">
      <div>
        <!-- Tooltip text here -->
      </div>
    </div>

    <div class="v-popper__arrow-container">
      <div class="v-popper__arrow-outer" />
      <div class="v-popper__arrow-inner" />
    </div>
  </div>
</div>

data-popper-shown

When the popper is shown, the target elements automatically get the popper-shown data property:

<!-- Popper is shown -->
<button data-popper-shown="">
  Click me
</button>

You can for example use this to style it with CSS:

button[data-popper-shown] {
  background: #f00;
}