Quasar1.0.5 : QTooltips in QTable's Header

[VueBebop]

Hi everyone,

I’m new to this quasar community and am very pleased with the framework. However I encountered an “issue” being that I do not seem to find how to add a custom QTooltip for each header columns of my QTable.

What I did try until now:

• Use slots : <template v-slot:header=“props”> ; <template v-slot:header-cell=“props”> but it did override everything (I just want to add a tooltip to the existing headers)
• Search on google, this forum, etc about a tip from expert users or if this topic was already created. I only found results for the Q-Data-table for 0.17.

Thanks in advance for your time and for this framework.

Best,

VueBebop

[metalsadman]

By overriding default scoped slot, header in your case, you will have to implement the qtr an qth.
Ie.

<tem... slot:header ...>
 <q-tr ...>
    <q-th ...>
      <q-tooltip>...</q-tooltip>
    </q-th>
....
....

Sry im on my phone, just showing above how your temp structure would look like.

[VueBebop]

Thank you for this quick answer.

I already tried that solution but it override all the header content (sort icon, css display, etc.) this is why I was wondering if there is a way to just add a tooltip without recreating the header.

For instance, when I put this :

     <template v-slot:header="props">
        <q-tr name="headword" :props="props.colMaps['headword']">
          <q-th :props="props">
            {{props.colMaps['headword'].label}}
            <q-tooltip>hey tooltip!</q-tooltip>
          </q-th>
        </q-tr>
      </template>

Considering this data from the props :

"colsMap": { "headword": { "name": "headword", "label": "Headword", "sortable": true, "field": "headword", "align": "right", "__iconClass": "q-table__sort-icon q-table__sort-icon--right", "__thClass": "text-right sortable", "__tdClass": "text-right" }, ...

I get nothing in my header. A blank one and no error message. Maybe there is something I really did not get and misunderstood.

Thank you for your help.

VueBebop