javascripthtmlquasar

Add Quasar Tooltip to a q-list that is built with code


I'm trying to add a tooltip to a q-list that is build via code:

      <q-list bordered>
    <q-item v-for="item in iCite_Data" :key="item.id"   v-ripple>
      <q-item-section>       
      <q-item-label > 
             {{ item.label }}               
       </q-item-label> 
    </q-item-section>
    <q-item-section side> 
       <q-item-label>{{ item.value }}</q-item-label>         
    </q-item-section>
  </q-item>

I have tried putting as a test:

  <q-tooltip content-class="bg-indigo" :offset="[10, 10]">
     {{ item.tooltip}}
    </q-tooltip>

When I add a tooltip to a hard coded q-item it works.

https://codepen.io/morgenweck/pen/VwprbrY?editors=1010

but if I try to add to a q-item built from code it does not. Can someone point me in the right direction?

Here is a basic Quasar codepen from code.

https://codepen.io/morgenweck/pen/VwpMNOO


Solution

  • You must replace the static text Some text as content of Tooltip with interpolation {{ contact.tooltip }} - and you will see your dynamic tooltips.