Can buttons in a button group wrap to the next line automatically?

[Daniel-Fei]

Question

1. In ui.button_group(), if I have many ui.button elements, I don't want all the buttons to be aligned in a single row (I've tested, and by default, all buttons are displayed in one row; a horizontal scrollbar appears when they exceed the page width). Instead, I would like them to automatically move to the next line when they exceed the current page width. Is there any way to achieve this?

2. I noticed that Quasar has a parameter called spread that allows buttons to fill the entire width. I'm wondering if it's possible to use this to achieve the desired layout?

3. Can ui.button be enhanced with a toolkit to show tooltip information when hovering over a button? If so, is it possible to customize the style of the tooltip text, such as its color?

Thank you in advance!

Here is an example code:

with ui.column().classes('w-[5%]'):
        ui.label('left space')
            
with ui.column().classes('w-[90%]'):
        with ui.button_group().props('flat'):
                ui.button('One').props('flat')
                ui.button('Two').props('flat')
                ui.button('Three').props('flat')
                ...
                ui.button('OneHundred').props('flat')

with ui.column().classes('w-[5%]'):
        ui.label('right space')

[falkoschindler]

Hi @Daniel-Fei,

1. I don't think this is possible. At least I can't find a prop or something in the Quasar documentation.

2. I don't think "spread" would help. Buttons in a group like ui.button_group().classes('w-[500px]').props('spread') simply spread over 500px instead of taking only the space they need. But they don't wrap.

3. Yes, you can nest ui.tooltip elements with arbitrary styled child elements:

   with ui.button('Button'):
       with ui.tooltip():
           ui.label('This is a yellow button').classes('text-yellow')

   

[Daniel-Fei]

Thank you, Falko Schindler, for your advice on my UI issue. Based on your answer, I've solved it with the following code:
with ui.element('div').classes('p-2') and ui.link(xxx).classes('text-sm text-gray-600 no-underline').
Thank you again for all the help!