pythonnicegui

Tooltip in ui.table? NiceGUI


I am new in frontend-developing and currently working on my first project, I am working with NiceGUI. I want to display a tooltip by hovering over an specific cell in my table. Is that possible? I couldn't find anything out there :(

I know that there is a function in NiceGUI for tooltips, but I think its not possible to generate them dynamically in table rows...

For example I have this table:


from nicegui import ui

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name'},
    {'name': 'age', 'label': 'Age', 'field': 'age'},
]
rows = [
    {'name': 'Alice', 'age': 18},
    {'name': 'Bob', 'age': 21},
    {'name': 'Carol'},
]
my_table = ui.table(columns=columns, rows=rows)

I tried something like this:

my_table.add_slot('body-cell-value', r'''
    <td :props="props">
        <template v-if="props.col.name == 'age'">
            <span v-tooltip="This is the age!">
                {{ props.value }}
            </span>
        </template>
        <template v-else>
            {{ props.value }}
        </template>
    </td>
''')

Solution

  • Quasar's QTooltip can be used by nesting a <q-tooltip> element:

    columns = [
        {'name': 'name', 'label': 'Name', 'field': 'name'},
        {'name': 'age', 'label': 'Age', 'field': 'age'},
    ]
    rows = [
        {'name': 'Alice', 'age': 18},
        {'name': 'Bob', 'age': 21},
        {'name': 'Carol'},
    ]
    my_table = ui.table(columns=columns, rows=rows)
    my_table.add_slot('body-cell-age', r'''
        <td :props="props">
            {{ props.value }}
            <q-tooltip>
                This is the age!
            </q-tooltip>
        </td>
    ''')
    

    Note that we can limit the slot template to the "age" column by using the slot "body-cell-age". So we don't need the if condition.