Dropdown: unique tooltip for each value in options

[gsal]

Question

Say, while browsing the available values in a Dropdown options, would it be possible to have a specific tooltip message come up depending on which item the mouse is hovering over?

[falkoschindler]

Hi @gsal,

It is not straightforward, but possible by overwriting the "option" slot:

ui.select({
    'a': 'A|This is the first option',
    'b': 'B|This is the second option',
}).add_slot('option', '''
    <q-item :props="props" clickable>
        <q-item-section>
            <q-item-label v-html="props.label.split('|')[0]"></q-item-label>
        </q-item-section>
        <q-tooltip>{{ props.label.split('|')[1] }}</q-tooltip>
    </q-item>
''')

Note how I squeezed label and tooltip into a single string separated by a pipe "|", because ui.select currently doesn't support more complex option dictionaries. But this workaround works quite well.

[gsal]

Worked like a charm. Thx.
I need to study slots!

[gsal]

Actually, I take that back :-(

Yes, the code proposed does display a tooltip while hovering over the items in the dropdown; but, it also keeps me from making a selection, effectively breaking the dropdown purpose, in the first place.

[falkoschindler]

Oh, I'm sorry, @gsal. I totally forgot to test it.

Apparently we need to handle the click event ourselves now. I couldn't find a way to trigger the selection on the client, so I introduced a new event "select-option" that is handled on the server. And we also need to set the "selected-item" slot to display the selected value correctly:

options = {
    'a': 'A|This is the first option',
    'b': 'B|This is the second option',
}
select = ui.select(options)
select.add_slot('option', '''
    <q-item :props="props" clickable
            @click="$parent.$parent.$parent.$emit('select-option', props)"
            @click="$parent.$parent.$parent.hidePopup()">
        <q-item-section>
            <q-item-label>{{ props.label.split('|')[0] }}</q-item-label>
        </q-item-section>
        <q-tooltip>{{ props.label.split('|')[1] }}</q-tooltip>
    </q-item>
''')
select.add_slot('selected-item', '''
    <span :props="props">{{ props.opt.label.split('|')[0] }}</span>
''')
select.on('select-option', lambda e: select.set_value(list(options)[e.args['index']]))

Maybe someone can find a simpler solution?