How to set QExpansionItem icon tooltip / size?



  • Hi, I have two small questions regarding QExpansionItem icon:

    1. Is there a way to change the icon size (i.e. bigger)?
    2. How can I assign a tooltip (or title) to the icon only? The code below doesn’t work quite well because the title is assigned to the whole component.
    <q-expansion-item expand-icon-toggle title="Expand bar">
    	<template v-slot:header>
    		<q-input type="search">
    			<template v-slot:append>
    				<q-icon name="search" />
    			</template>
    		</q-input>
    		<q-item-section></q-item-section>
    	</template>
    
    	<q-card>
    		<q-card-section>
    			Contents
    		</q-card-section>
    	</q-card>
    </q-expansion-item>
    

    Thanks in advance!



  • I found out part of the answer4 myself. With expand-icon-class I can change the icon size:

    expand-icon-class="large-icon"
    

    and, in CSS:

    .large-icon i.q-icon {
       font-size: 30px;
    }
    


  • I found a very convoluted way to set up the title property::

    <q-expansion-item ref="filterHeader" expand-icon-toggle title="Expand bar">
        . . .
    </q-expansion-item>
    
    this.$refs.filterHeader.$children[0].$children[2].$children[0].$el.title = 'Expand / collapse';
    

    Ugh.

    This is awkward, I’m sure there should be a better way. If not, I think Quasar should have some new property (icon_title or something) because good UX practices suggest that every button icon should have a tooltip.

    Any other ideas?



  • Bump. No answers?



  • You can use “target” property of q-tooltip to attach tooltip to q-expansion-item icon. Set unique class on each q-expansion-item, then specify it as target in q-tooltip:

          <q-expansion-item
            :content-inset-level="0.3"
            v-for="menuSection in menuSections"
            v-bind:key="menuSection.title"
            :icon="menuSection.icon"
            :label="menuSection.title"
            :class="`ei-${menuSection.title}`"
            expand-separator
          >
            <q-tooltip anchor="top right" self="center middle" :target="`.ei-${menuSection.title} i`">{{ menuSection.title }}</q-tooltip>
            <q-list>
              <q-item clickable v-ripple v-for="item in menuSection.items" v-bind:key="item.link" :to="item.link" exact>
                <q-item-section avatar>
                  <q-icon :name="item.icon" size="xs">
                    <q-tooltip anchor="top right" self="center middle">
                      {{ item.title }}
                    </q-tooltip>
                  </q-icon>
                </q-item-section>
                <q-item-section>
                  <q-item-label>{{ item.title }}</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-expansion-item>
    

    See full example here:
    https://github.com/slanatech/dashblocks/blob/master/src/demo/layouts/Default.vue#L48

    Demo:
    https://dashblocks.io/demo

    Tooltips can be seen in expansion items in sidebar menu


Log in to reply