Fixed #122 - Implemented Tooltip

exports/tooltip.js

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/tooltip/Tooltip.js');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "primevue",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.4-SNAPSHOT",
   "repository": {
     "type": "git",
     "url": "https://github.com/primefaces/primevue.git"

src/AppFooter.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="content-section layout-footer clearfix">
-        <span>PrimeVUE 1.0.0-rc.3</span>
+        <span>PrimeVue 1.0.0-rc.4</span>
         <div class="footer-links">
             <a href="https://github.com/primefaces/primevue"><i class=" icon-github fa fa-github-square"></i></a>
             <a href="https://twitter.com/primevue"><i class="icon-twitter fa fa-twitter-square"></i></a>

src/AppMenu.vue

@@ -78,6 +78,7 @@
                 <router-link to="/dialog">Dialog</router-link>
                 <router-link to="/overlaypanel">OverlayPanel</router-link>
                 <router-link to="/sidebar">Sidebar</router-link>
+                 <router-link to="/tooltip">Tooltip</router-link>
             </div>
 
             <span>

src/assets/styles/primevue.css

@@ -4,4 +4,5 @@
 @import '../../components/inputtext/InputText.css';
 @import '../../components/password/Password.css';
 @import '../../components/radiobutton/RadioButton.css';
-@import '../../components/splitbutton/SplitButton.css';
+@import '../../components/splitbutton/SplitButton.css';
+@import '../../components/tooltip/Tooltip.css';

src/components/tooltip/Tooltip.css

@@ -0,0 +1,67 @@
+.p-tooltip {
+    position:absolute;
+    display:none;
+    padding: .25em .5em;
+    max-width: 12.5em;
+}
+
+.p-tooltip.p-tooltip-right,
+.p-tooltip.p-tooltip-left {
+    padding: 0 .25em;
+}
+
+.p-tooltip.p-tooltip-top,
+.p-tooltip.p-tooltip-bottom {
+    padding:.25em 0;
+}
+
+.p-tooltip .p-tooltip-text {
+   padding: .125em .5em;
+   background-color: rgb(76, 76, 76);
+   color: #ffffff;
+   white-space: pre-line;
+}
+
+.p-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+
+.p-tooltip-right .p-tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -.25em;
+    border-width: .25em .25em .25em 0;
+    border-right-color: rgb(76, 76, 76);
+}
+
+.p-tooltip-left .p-tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -.25em;
+    border-width: .25em 0 .25em .25em;
+    border-left-color: rgb(76, 76, 76);
+}
+
+.p-tooltip.p-tooltip-top {
+    padding: .25em 0;
+}
+
+.p-tooltip-top .p-tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -.25em;
+    border-width: .25em .25em 0;
+    border-top-color: rgb(76, 76, 76);
+}
+
+.p-tooltip-bottom .p-tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -.25em;
+    border-width: 0 .25em .25em;
+    border-bottom-color: rgb(76, 76, 76);
+}

src/components/tooltip/Tooltip.js

@@ -0,0 +1,226 @@
+import UniqueComponentId from '../utils/UniqueComponentId';
+import DomHandler from '../utils/DomHandler';
+
+function bindEvents(el) {
+    const modifiers = el.$_ptooltipModifiers;
+    if (modifiers.focus) {
+        el.addEventListener('focus', onFocus);
+        el.addEventListener('blur', onBlur);
+    }
+    else {
+        el.addEventListener('mouseenter', onMouseEnter);
+        el.addEventListener('mouseleave', onMouseLeave);
+        el.addEventListener('click', onClick);
+    }
+}
+
+function unbindEvents(el) {
+    const modifiers = el.$_ptooltipModifiers;
+    if (modifiers.focus) {
+        el.removeEventListener('focus', onFocus);
+        el.removeEventListener('blur', onBlur);
+    }
+    else {
+        el.removeEventListener('mouseenter', onMouseEnter);
+        el.removeEventListener('mouseleave', onMouseLeave);
+        el.removeEventListener('click', onClick);
+    }
+
+    //this.unbindDocumentResizeListener();
+}
+
+function onMouseEnter(event) {
+    show(event.currentTarget);
+}
+
+function onMouseLeave(event) {
+    hide(event.currentTarget);
+}
+
+function onFocus(event) {
+    show(event.currentTarget);
+}
+
+function onBlur(event) {
+    hide(event.currentTarget);
+}
+
+function onClick(event) {
+    hide(event.currentTarget);
+}
+
+function show(el) {
+    if (!el.$_ptooltipValue) {
+        return;
+    }
+
+    let tooltipElement = create(el);
+    align(el);
+    DomHandler.fadeIn(tooltipElement, 250);
+    tooltipElement.style.zIndex = ++DomHandler.zindex;
+}
+
+function hide(el) {
+    remove(el);
+}
+
+function getTooltipElement(el) {
+    return document.getElementById(el.$_ptooltipId);
+}
+
+function create(el) {
+    const id = UniqueComponentId() + '_tooltip';
+    el.$_ptooltipId = id;
+
+    let container = document.createElement('div');
+    container.id = id;
+
+    let tooltipArrow = document.createElement('div');
+    tooltipArrow.className = 'p-tooltip-arrow';
+    container.appendChild(tooltipArrow);
+
+    let tooltipText = document.createElement('div');
+    tooltipText.className = 'p-tooltip-text';
+    tooltipText.innerHTML = el.$_ptooltipValue;
+
+    container.appendChild(tooltipText);
+    document.body.appendChild(container);
+
+    container.style.display = 'inline-block';
+
+    return container;
+}
+
+function remove(el) {
+    let tooltipElement = getTooltipElement(el);
+    if (tooltipElement && tooltipElement.parentElement) {
+        document.body.removeChild(tooltipElement);
+    }
+    el.$_ptooltipId = null;
+}
+
+function align(el) {
+    const modifiers = el.$_ptooltipModifiers;
+
+    if (modifiers.top) {
+        alignTop(el);
+        if (isOutOfBounds(el)) {
+            alignBottom(el);
+        }
+    }
+    else if (modifiers.left) {
+        alignLeft(el);
+        if (isOutOfBounds(el)) {
+            alignRight(el);
+
+            if (isOutOfBounds(el)) {
+                alignTop(el);
+
+                if (isOutOfBounds(el)) {
+                    alignBottom(el);
+                }
+            }
+        }
+    }
+    else if (modifiers.bottom) {
+        alignBottom(el);
+        if (isOutOfBounds(el)) {
+            alignTop(el);
+        }
+    }
+    else {
+        alignRight(el);
+        if (isOutOfBounds(el)) {
+            alignLeft(el);
+
+            if (isOutOfBounds(el)) {
+                alignTop(el);
+
+                if (isOutOfBounds(el)) {
+                    alignBottom(el);
+                }
+            }
+        }
+    }
+}
+
+function getHostOffset(el) {
+    let offset = el.getBoundingClientRect();
+    let targetLeft = offset.left + DomHandler.getWindowScrollLeft();
+    let targetTop = offset.top + DomHandler.getWindowScrollTop();
+
+    return {left: targetLeft, top: targetTop};
+}
+
+function alignRight(el) {
+    preAlign(el, 'right');
+    let tooltipElement = getTooltipElement(el);
+    let hostOffset = getHostOffset(el);
+    let left = hostOffset.left + DomHandler.getOuterWidth(el);
+    let top = hostOffset.top + (DomHandler.getOuterHeight(el) - DomHandler.getOuterHeight(tooltipElement)) / 2;
+    tooltipElement.style.left = left + 'px';
+    tooltipElement.style.top = top + 'px';
+}
+
+function alignLeft(el) {
+    preAlign(el, 'left');
+    let tooltipElement = getTooltipElement(el);
+    let hostOffset = getHostOffset(el);
+    let left = hostOffset.left - DomHandler.getOuterWidth(tooltipElement);
+    let top = hostOffset.top + (DomHandler.getOuterHeight(el) - DomHandler.getOuterHeight(tooltipElement)) / 2;
+    tooltipElement.style.left = left + 'px';
+    tooltipElement.style.top = top + 'px';
+}
+
+function alignTop(el) {
+    preAlign(el, 'top');
+    let tooltipElement = getTooltipElement(el);
+    let hostOffset = getHostOffset(el);
+    let left = hostOffset.left + (DomHandler.getOuterWidth(el) - DomHandler.getOuterWidth(tooltipElement)) / 2;
+    let top = hostOffset.top - DomHandler.getOuterHeight(tooltipElement);
+    tooltipElement.style.left = left + 'px';
+    tooltipElement.style.top = top + 'px';
+}
+
+function alignBottom(el) {
+    preAlign(el, 'bottom');
+    let tooltipElement = getTooltipElement(el);
+    let hostOffset = getHostOffset(el);
+    let left = hostOffset.left + (DomHandler.getOuterWidth(el) - DomHandler.getOuterWidth(tooltipElement)) / 2;
+    let top = hostOffset.top + DomHandler.getOuterHeight(el);
+    tooltipElement.style.left = left + 'px';
+    tooltipElement.style.top = top + 'px';
+}
+
+function preAlign(el, position) {
+    let tooltipElement = getTooltipElement(el);
+    tooltipElement.style.left = -999 + 'px';
+    tooltipElement.style.top = -999 + 'px';
+    tooltipElement.className = 'p-tooltip p-component p-tooltip-' + position;
+}
+
+function isOutOfBounds(el) {
+    let tooltipElement = getTooltipElement(el);
+    let offset = tooltipElement.getBoundingClientRect();
+    let targetTop = offset.top;
+    let targetLeft = offset.left;
+    let width = DomHandler.getOuterWidth(tooltipElement);
+    let height = DomHandler.getOuterHeight(tooltipElement);
+    let viewport = DomHandler.getViewport();
+
+    return (targetLeft + width > viewport.width) || (targetLeft < 0) || (targetTop < 0) || (targetTop + height > viewport.height);
+}
+
+const Tooltip = {
+    bind(el, options) {
+        el.$_ptooltipModifiers = options.modifiers;
+        el.$_ptooltipValue = options.value;
+        bindEvents(el);
+    },
+    unbind(el) {
+        remove(el);
+        unbindEvents(el);
+    }
+};
+
+export default Tooltip;

src/main.js

@@ -63,6 +63,7 @@ import TreeTable from './components/treetable/TreeTable';
 import Toast from './components/toast/Toast';
 import ToastService from './components/toast/ToastService';
 import Toolbar from './components/toolbar/Toolbar';
+import Tooltip from './components/tooltip/Tooltip';
 import ToggleButton from './components/togglebutton/ToggleButton';
 import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
 import InputMask from './components/inputmask/InputMask';
@@ -80,6 +81,8 @@ import '@fullcalendar/timegrid/main.min.css';
 
 Vue.use(ToastService);
 
+Vue.directive('tooltip', Tooltip);
+
 Vue.config.productionTip = false;
 
 Vue.component('Accordion', Accordion);

src/router.js

@@ -492,6 +492,11 @@ export default new Router({
 			name: 'toolbar',
 			component: () => import('./views/toolbar/ToolbarDemo.vue')
         },
+        {
+			path: '/tooltip',
+			name: 'tooltip',
+			component: () => import('./views/tooltip/TooltipDemo.vue')
+		},
         {
 			path: '/tree',
 			name: 'tree',