Repository files navigation

a unstyled tooltip, which adjusts opening direction to be in viewport.

npm install --save-dev vue-comps-tooltip

or includebuild/bundle.js.

# in your componentcomponents:"tooltip":require("vue-comps-tooltip")# or, when using bundle.jscomponents:"tooltip":window.vueComps.tooltip

<button> Hover<tooltip>Content</tooltip></button>

seedev/ for examples.

There are two ways of positioning. The default is as a child of the parent element, the other posibility is onbody.

• The parent positioning can be problematic when you have anoverflow:hidden as a parent to the nearest element withposition:absolute|relative|fixed and the tooltip is overflowing.
• thebody positioning can be problematic when the parent is moving relative tobody or when you depend on inheritance of styles.

You can provide a vue transition like this:

Vue.transition("fade",{// your transition})// or in the instance:transitions:{fade:{// your transition}}// usage:template:"<tooltip transition='fade'></tooltip>"

You can access several properties in your enter hook:

enter:function(el,cb){// in which direction the tooltip will open. one of s, n, w or ethis.direction// style properties as numbersthis.topthis.leftthis.widththis.heightthis.offset// will be added on or subtracted of top or left depending on direction}

seedev/transition for a working example.

• 1.1.0
  added toggled event
  set default transition

• 1.0.0
  renamedposition prop toon-body - now is a boolean
  now using vue transitions
  events are renamed after vue transitions

Clone repository.

npm installnpm run dev

Browse tohttp://localhost:8080/.

Copyright (c) 2016 Paul PflugradtLicensed under the MIT license.