This is the 19th day of my participation in the August More Text Challenge

What does a Tooltip mean?

In this case, the Tooltip is, as the name suggests, a text tip… Nonsense.

After all, a picture makes it all clear.

Let’s start with a classic case.

This is the Alt attribute of the IMG image tag. Other tags can also use the title attribute to achieve this effect.

I’m just going to arbitrarily change the DOM and add the title property to do that.

Of course these are the default effects, and you need to hover for 1-2 seconds to see the effect of this property.

The text prompt component to be analyzed today achieves this effect, but it is more responsive than the default effect. After all, if you package the component yourself, you can customize the display time.

And you can customize the location of the display through components.

Structure, structure, structure. Say it again

Before redeveloping, of course, take a look at the effects and analyze what the component is trying to accomplish.

Once you see the results, simple layouts and CSS styles are easier to deal with.

block content div.yx-tooltip( @mouseenter="handleShowPopper" @mouseleave="handleClosePopper" ) div.yx-tooltip-rel(ref="reference") slot transition(name="fade") div( :class="['yx-tooltip-popper' `yx-tooltip-${theme}`]" ref="popper" v-show="! disabled && (visible||always)" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper" :data-transfer="transfer" ) div.yx-tooltip-content div.yx-tootip-arrow div( :class="['yx-tootip-inner', !maxWidth ? 'yx-tooltip-inner-width' : '']" ) slotCopy the code

The structure is relatively simple, but also can be customized, mainly need to write the corresponding CSS in advance;

Of course, you can also try to do calculations in the logical part of JavaScript.

The logical part

The logical part of this section is simpler because HTML and CSS take care of the display mode, location, and so on.

It is mainly to control the display and hide.

let timeout;
const handleShowPopper = () = > {
  if (timeout) clearTimeout(timeout);
  timeout = setTimeout(() = > {
    visiblevalue = true;
  }, props.delay);
}
const handleClosePopper = () = > {
  if (timeout) {
    clearTimeout(timeout);
    if(! props.controlled) { timeout =setTimeout(() = > {
        props.visible = false;
      }, 100); }}}Copy the code

This is the main part, the specific style can be customized.

Hang on components.

Since it is called in the interface, use the original mount method.

import ele from './tooltip.vue';

ele.install = function(app){
  app.component(ele.name, ele)
}

export default ele;
Copy the code