The problem background

If the contents of the cells in the table are exceeded, it is processed. The tooltip effect is displayed when the mouse moves over the dotted cell. Do not use template writing.

<template>
  <a-tooltip>
        <template slot="title"> 
            prompt text 
        </template>
        <a-button>
            Tooltip will show when mouse enter. 
        </a-button>
   </a-tooltip> 
</template>
Copy the code

The target element can be retrieved with the mouse hover. Dynamically create a tooltip to mount.

The solution

  • Use getBoundingClientRect to get the left and top of the target element relative to the window.
  • Dynamically create a Tooltip instance using the Render method.
  • Once the element is rendered, fetch the Tooltip element from the page and adjust the position of the tooltip element based on the location of the target element.

The sample code

    var showTooltip = function (elem, message) {
      hideTooltip();
      var tooltip = new Vue({
        render(h) {
          return h(Tooltip, {
            props: {
              title: message,
              defaultVisible: true.destroyTooltipOnHide: true.overlayClassName: 'gridTooltip'}}); } }).$mount();document.body.appendChild(tooltip.$el);
      // Get the tooltip element and position it after rendering is complete.
      setTimeout(function() {
        const target = document.querySelector(".gridTooltip");
        if (target && elem) {
          const rect = elem.getBoundingClientRect();
          target.style.top = rect.top - 32 + 'px';
          target.style.left = rect.left + 'px'; }},10);
    };
Copy the code

Matters needing attention

  • DefaultVisible must be true when creating tooltip.
  • The float render parent must be document.body when tooltip is created.
  • There can only be one tooltip globally. When you create a new tooltip, you must destroy the old one.
  • The overlayClassName is set to get the Tooltip popover element.
  • The position of the tooltip popover element is adjusted relative to the target element.

The resources

  • Rendering function
  • Tooltip component