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" />

    Thanks in advance!

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


    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">
        . . .
    this.$refs.filterHeader.$children[0].$children[2].$children[0].$el.title = 'Expand / collapse';


    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:

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

    See full example here:


    Tooltips can be seen in expansion items in sidebar menu

Log in to reply