Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

lyahim free asked 4 years ago


Dear Support Team,

I would like to ask, is it possible to specify delay on tooltip before show the text?

Thank you, Mihaly


Mikołaj Smoleński staff commented 4 years ago

Unfortunately there is no such option. Best regards


lyahim free commented 4 years ago

Dear Mikolaj!

Is it possible to create a new change request to add this feature?

Thank you, Mihaly


lyahim free answered 4 years ago


I found an alternative way to simulate delay. I made a wrapper div what have a mouseover event listener. The function handle the timeout. Other important part is the tooltipClass on mdb-tooltip what hide the whole tooltip part of the component initially. Here have to use visibility attribute instead of display.

<div @mouseover="mouseOver">
<mdb-tooltip sm trigger="hover" :class="tooltipClass">
</mdb-tooltip>

data() {
return {
  timer: null,
  tooltipClass: "btn-tooltip"
};  },

methods: {
mouseOver() {
  if (this.timer) {
    clearTimeout(this.timer);
    this.timer = null;
    this.tooltipClass = "btn-tooltip";
  }
  this.timer = setTimeout(() => {
    this.tooltipClass = "";
  }, 1000);
}

}

.btn-tooltip /deep/ .tooltip {  visibility: hidden;}

Mikołaj Smoleński staff commented 4 years ago

Thank you for sending your solution. It can be very useful for our other users.

Best regards


lyahim free commented 4 years ago

Dear Mikolaj!

Is it possible to create a new change request to add this feature?

Thank you, Mihaly


Magdalena Dembna staff commented 4 years ago

I will add this to our feature request list. Best regards, Magdalena



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No