How to set QExpansionItem icon tooltip / size?

rubs

Hi, I have two small questions regarding QExpansionItem icon:

Is there a way to change the icon size (i.e. bigger)?
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!

rubs

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;
}

rubs

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?

rubs

Bump. No answers?

sv2

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

No More Posting New Topics!

How to set QExpansionItem icon tooltip / size?