@whoacowboy

what’s the output of quasar info

@rubs icon is the one in the left before the header, expand-icon is the one on the right, expanded is if you want to show a different icon when qexpansionitem is expanded. Difference of expand and expanded is no animation if you use expanded as stated in the docs. It prolly need a distinct definition, but the naming kinda gives it all away imo. If you’re up for a pr, that would be cool.

Thank you guys for the great answers. Much appreciated!

Thanks to your tip, here’s the resulting code, complete with Intellisense:

/** @type {quasar.QTooltip} */ const tooltipProps = QTooltip.options.props; tooltipProps.delay.default = 550;

Good! I really meant in the API section / selected slot, but improvements to the docs are always welcome. Now I see that I also completely missed the selected-item slot… This is a truly flexible component, I’m always learning something new about it. Thanks again!

Whoa, that was fast. Just nailed it down to a CSS problem. The q-select component was inheriting a style it was not supposed to. Again, thank you guys for your help.

Thanks for pointing this link out; I have read that but will re-read as I often overlook some details that will explain how to do what is needed. It looks like the node may be set selectable even if no ticks are involved. However, the nodes are built up with a v-for routine, and how to set leaves selectable but parents non-selectable is not clear.

It was very good. I tried to make the embedded splitter, it works but when I close it the middle part closes too. I tried to change the css classes, but I couldn’t.

https://codepen.io/julioferraz/pen/oNbRQgw

Automatically translated.

@turigeza, thanks for the suggestion, I tested both ways but yours was simpler to implement.

@viswanathNK Thanks, that’s exactly what I wanted!

Ok, thanks! Will do.

I believe this issue has been solved, at least in Quasar’s website the differences are no longer visible. Can anyone confirm this? Thanks in advance.

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