Example code of Tooltip of Vue component

Preface

This article is a general framework for the main Alert components, providing a small number of configurable options. To provide roughly ideas

tooltip

It is often used to display the prompt information when the mouse hover is displayed.

Template structure

<template>
 <div style="position:relative;">
  <span ref="trigger">
   <slot>
   </slot>
  </span>
  <div class="tooltip"
   v-bind:class="{
    'top':   placement === 'top',
    'left':  placement === 'left',
    'right':  placement === 'right',
    'bottom': placement === 'bottom',
    'disable': type === 'disable',
    'delete': type === 'delete',
    'visible': show === true 
   }"
   ref="popover"
   role="tooltip">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner">
    <slot name="content" v-html="content"></slot>
   </div>
  </div>
 </div>
</template>

A rough structure DOM structure A div contains arrows and bubble content.

Selectable tooltip position in v-bind, whether to disable, or display hidden

slot difference for customization. The default content is received.

script

import EventListener from '../utils/';

export default {
 props: {
  // Events that need to be listened to  trigger: {
   type: String,
   default: 'click'
  },
  effect: {
   type: String,
   default: 'fadein'
  },
  title: {
   type: String
  },
  // toolTip message prompt  content: {
   type: String
  },
  header: {
   type: Boolean,
   default: true
  },
  placement: {
   type: String
  }
 },
 data() {
  return {
   // The bubble position obtained by calculating   position: {
    top: 0,
    left: 0
   },
   show: true
  };
 },
 watch: {
  show: function(val) {
   if (val) {
    const popover = this.$;
    const triger = this.$[0];
    // Calculate the position through placement    switch () {
     case 'top' :
       =  -  / 2 +  / 2;
       =  - ;
      break;
     case 'left':
       =  - ;
       =  +  / 2 -  / 2;
      break;
     case 'right':
       =  + ;
       =  +  / 2 -  / 2;
      break;
     case 'bottom':
       =  -  / 2 +  / 2;
       =  + ;
      break;
     default:
      ('Wrong placement prop');
    }
     =  + 'px';
     =  + 'px';
   }
  }
 },
 methods: {
  toggle() {
    = !;
  }
 },
 mounted() {
  if (!this.$) return ("Couldn't find popover ref in your component that uses popoverMixin.");
  // Get the listening object  const triger = this.$[0];
  // Listen to specific events according to trigger  if ( === 'hover') {
   this._mouseenterEvent = (triger, 'mouseenter', () =&gt; {
     = true;
   });
   this._mouseleaveEvent = (triger, 'mouseleave', () =&gt; {
     = false;
   });
  } else if ( === 'focus') {
   this._focusEvent = (triger, 'focus', () =&gt; {
     = true;
   });
   this._blurEvent = (triger, 'blur', () =&gt; {
     = false;
   });
  } else {
   this._clickEvent = (triger, 'click', );
  }
   = !;
 },
 // Remove listening before component destruction and release memory beforeDestroy() {
  if (this._blurEvent) {
   this._blurEvent.remove();
   this._focusEvent.remove();
  }
  if (this._mouseenterEvent) {
   this._mouseenterEvent.remove();
   this._mouseleaveEvent.remove();
  }
  if (this._clickEvent) this._clickEvent.remove();
 }
};

// 
const EventListener = {
 /**
  * Listen to DOM events during the bubble phase.
  *
  * @param {DOMEventTarget} target DOM element to register listener on.
  * @param {string} eventType Event type, . 'click' or 'mouseover'.
  * @param {function} callback Callback function.
  * @return {object} Object with a `remove` method.
  */
 listen(target, eventType, callback) {
  if () {
   (eventType, callback, false);
   return {
    remove() {
     (eventType, callback, false);
    }
   };
  } else if () {
   ('on' + eventType, callback);
   return {
    remove() {
     ('on' + eventType, callback);
    }
   };
  }
 }
};

export default EventListener;

Encapsulated event listening

use

Use the content attribute to determine the prompt information when hover. The display effect is determined by the placement attribute: the value of the placement attribute is: direction-alignment position; four directions: top, left, right, bottom. The trigger attribute is used to set the way to trigger the tooltip, and the default is hover.

&lt;d-tooltip content="I'm tooltip"&gt;
 &lt;d-button type="text"&gt;Move the mouse to me and try&lt;/d-button&gt;
&lt;/d-tooltip&gt;
&lt;d-tooltip content="I'm tooltip" trigger="click"&gt;
 &lt;d-button type="text"&gt;Click me to try&lt;/d-button&gt;
&lt;/d-tooltip&gt;

Content content distribution

Set a slot named content.

&lt;d-tooltip&gt;
 &lt;d-button type="text"&gt;Move the mouse to me and try&lt;/d-button&gt;
 &lt;p slot="content" class="tooltip-content"&gt;I'm content distributionconent。&lt;/p&gt;
&lt;/d-tooltip&gt;

Attributes

parameter	illustrate	type	Optional value	default value
content	The displayed content can also be passed into the DOM through slot#content	String	—	—
placement	Where the Tooltip appears	String	top/right/bottom/left	top
trigger	Tooltip trigger method	String	—	hover

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.