v-tooltip 3.0 alpha

Dear patrons,

I have recently worked on the next major version of v-tooltip, which is a library to easily make tooltips, dropdowns and popovers with Popper.js. It's currently on the v3.0 branch of the repo. You can install it with the 'alpha' tag, for example: `yarn add [email protected]`.


Read on to learn what's new!


The new library logo!


Composition

In v3, v-tooltip is entirely built around a few key components:

- Popper.vue, holding all the logic around Popper.js like managin open state, trigger events, etc.

- PopperContent.vue, responsible for the popper instance content and default CSS style.

- PopperWrapper.vue, a generic component putting those two together plus a default slot so you can easily put target content (like for example a button).


Themes

The way global options work has completely changed: it's now based on a 'theme' system. Each theme is a plain object - a subset of the available configuration. It allows overriding defaults, like for example trigger events, placement, delay, etc.

A theme can extend another theme with the `$extend` property. You can have multiple themes extending each other (think inheritance chain). By default it will also inherit all the CSS classes of the extended themes, but you can prevent this at some point with the `$resetCss: true` property (all themes extending this one will still get its CSS class until they also set `$resetCss: true`. Here is an example 

By default, there are two themes:

- 'tooltip' with trigger set to hover and other values that make sense for tooltips,

- 'dropdown' with trigger set to click and, again, sensible values for dropdowns and interactive popovers.

See the default global options here.

Additionally, two components extend PopperWrapper.vue while applying the style of the two default themes:

- Dropdown.vue (registered as VDropdown) for the 'dropdown' theme. This is the equivalent of the old 'Popover' component in v-tooltip v2.

- Tooltip.vue (registered as VTooltip) for the 'tooltip' theme. This also means there is a default way to use tooltips as a component now!

Good news is: you can create you own! See some composition examples 

Good news #2: default styles are included! No longer writing the whole style yourself! See installation to learn how to include it in your project.


v-tooltip directive

The v-tooltip directive was also completely reworked. It is now using a 'TooltipDirective.vue' component which is a variant of 'PopperWrapper.vue' that doesn't have the target slot part - instead it manually targets the element bound on the v-tooltip directive.

The fork of Tooltip.js is also removed and all the logic is shared with the rest of the library. This means all the props/options are the same between v-tooltip, VDropdown, VTooltip and your own compositions. All the global options in themes are also the same, except for `contentHtml` and `loadingContent` which are specific for the v-tooltip directive.

The v-tooltip directive is now merely mounting a tiny Vue app with the TooltipDirective component.


CSS classes

All CSS classes in the library are now scoped by following the BEM convention. For example, the popper isntance inner div should now be styled with `.v-popper__inner` and the arrow with `.v-popper__arrow`.

This change should prevent any conflict with other *cough* popular libraries *cough* making extensive use of simple unscoped CSS classes like `.tooltip`. As a result, CSS class customization features are no longer necessary and all related code was removed.


Other changes and improvements

- New `touch` trigger enabled by default on the `tooltip` theme. It allows triggering the popper on touch start and hide it on touch end, which is very handy for mobile devices like iPhones.

- The library size went down by almost 29%: the minimized browser file went from 59.5kB (18kB gzip) to 42.4kB (13.2kB gzip). In addition, the reworked source code now allows you to import specific part of the library (like for example the VDropdown component) and only the necessary code will be imported in your project instead of the whole library!

Almost the same size than v1 but 10 times more features!

- The directive now supports `v-tooltip.auto-start` and `v-tooltip.auto-end` modifier.

- The placement options/modifiers are now validated against the available values in Popper.js

- Since the options are the same everywhere now, the v-tooltip directive also supports `handleResize`, so you can have content that changes size over time and have the popper update automatically!

- Bug fixes & many more improvements!


What's next?

I think the alpha is already pretty stable, but expect bugs or things breaking between versions. Before going stable, the v3 branch will need some more work:

- re-implementing `hideOnTargetClick` option

- a entirely new doc based on vuepress

- a migration guide

- testing


Thanks for reading!

Best regards,

Guillaume

Tier Benefits
Recent Posts