Tooltip in ui.table? NiceGUI

Question

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>
''')

Answer 1

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.