How to make a tooltip work on a switch and a Label in a grid in a Repeater?

Question

I'm working on a plasmoid for KDE Plasma 6 I can't get a ToolTipArea to work correctly on a Switch and a Label which are in a grid (the positions are defined in a modelData) which is in a repeater

the goal is that the ToolTipArea covers the entire area (the red area in the photos represents the activation of the tooltip on mouseover)

and when I generate Switch/Label the ToolTipArea covers its area (still in red):

currently the ToolTipArea works but I have this error: QML ToolTipArea: Detected anchors on an item that is managed by a layout. This is undefined behavior; use Layout.alignment instead.

I know it's "anchors.fill: parent" that is causing the problem but I don't know how else to make ToolTipArea cover the entire area

I simplified the code as best as possible:

PlasmoidItem {
    id: root


    fullRepresentation: GridLayout {
        id: grid
        anchors.fill: parent


        Repeater {
            id: switchRepeater
            model: root.switches
            delegate:

            RowLayout {
                id: switchR

                width: grid.width / grid.columns
                height: grid.height

                Layout.column: modelData.columnIndex
                Layout.row: modelData.rowIndex


                PlasmaComponents3.Switch {
                    id: switchItem
                    checked: modelData.checked
                }

                PlasmaComponents3.Label {
                    id: switchLabel
                    text: modelData.name

                }

                PlasmaCore.ToolTipArea {
                    id: toolTipFullArea
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    anchors.fill: parent
                    active: modelData.tooltipFullEnabled
                    mainText: "Titre"
                    subText: "description"
                }
            }
        }
    }
}

Answer 1

[EDIT/REWRITE]

Several suggestions:

• Put your RowLayout inside a container, such as a Frame (or Grid) or anything that can hoverEnabled: true defined
• Then, the onHoveredChanged handler shows the tooltip
• The tool tip itself can reside on the outer GridLayout

Here's an example of how you may put it together:

GridLayout {
    id: grid
    x: 200; y: 200
    Repeater {
        model: [
            { rowIndex:0, columnIndex:0, name:"Group 1" },
            { rowIndex:0, columnIndex:1, name:"Group 2" },
            { rowIndex:1, columnIndex:0, name:"Switch 5" },
            { rowIndex:1, columnIndex:1, name:"Switch 2" },
            { rowIndex:2, columnIndex:0, name:"Switch 1" },
            { rowIndex:2, columnIndex:1, name:"Switch 3" },
        ]
        delegate: Frame {
            Layout.column: modelData.columnIndex
            Layout.row: modelData.rowIndex
            hoverEnabled: true
            onHoveredChanged: {
                if (hovered) {
                    let mainText = modelData.name;
                    let subText = `description of ${modelData.name}`;
                    grid.ToolTip.text = `${mainText}\n\n${subText}`;
                    grid.ToolTip.visible = true;
                    grid.ToolTip.timeout = 2000;
                }
            }
            RowLayout {
                Switch { checked: modelData.checked }
                Label { text: modelData.name }
            }
        }
    }
}

You can Try it Online!