Custom Timline - Tooltip problem


Topic: Custom Timline - Tooltip problem

digitalmanagerguru asked 5 years ago

I've created a custom mdb-timeline and mdb-timelineitem, where this is my mdb-timelineitem:

https://pastebin.com/yhR23Pmp

And if I try to add a mdb-tooltip to the begining of the code:

<a v-if="!isReaded" :href="href" @click="markUnread(notificationId)">
  <span :class="markerClass">
    <mdb-icon v-if="icon" :far="far" :fad="fad" :fal="fal" :class="iconClass" :icon="icon" :fab="fab" aria-hidden="true"></mdb-icon>
    <p v-else>{{marker}}</p>
  </span>
</a>
<span v-else class="a">
  <span :class="markerClass">
      <mdb-icon v-if="icon" :far="far" :fad="fad" :fal="fal" :class="iconClass" :icon="icon" :fab="fab" aria-hidden="true"></mdb-icon>
      <p v-else>{{marker}}</p>
  </span>
</span>

And change to this:

   <a v-if="!isReaded" :href="href" @click="markUnread(notificationId)">
      <span :class="markerClass">
        <mdb-tooltip v-if="icon" trigger="hover" :options="{placement: 'top'}">
          <span slot="tip">Mark as read</span>
          <mdb-icon slot="reference" :far="far" :fad="fad" :fal="fal" :fab="fab" :class="iconClass" :icon="icon" aria-hidden="true"></mdb-icon>
        </mdb-tooltip>
        <p v-else>{{marker}}</p>
      </span>
    </a>
    <span v-else class="a">
      <span :class="markerClass">
          <mdb-icon v-if="icon" :far="far" :fad="fad" :fal="fal" :fab="fab" :class="iconClass" :icon="icon" aria-hidden="true"></mdb-icon>
          <p v-else>{{marker}}</p>
      </span>
    </span>

For some gods-know-why-reason the tooltip isnt working :/

Am I doing something wrong? (I hate this tooltip component lol should be easy and its always complicated)


Mikołaj Smoleński staff answered 5 years ago

I have to ask the obvious question: Did you register this component? Also, do You have any errors in console?

Best regards


I was importing it but forget to check again if it was on the components object 🤦‍♂️

After many tests I forgot to recheck the console again, because I added initially (import and components) but somewhere I've remove it from components list without noticing it.

Thanks for the heads up 👍 all working now


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.0.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Win.10
  • Provided sample code: No
  • Provided link: Yes