Custom Timline - Tooltip problem

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)