Quasar1.0.5 : QTooltips in QTable's Header



  • 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



  • 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.



  • 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


Log in to reply