Issue in overlay

[PrimeTheFirst]

Note: Behavior is very weird. Only the bottom bar works as expected. This is the bottom navbar

bottomNavigationBar: OverlayTooltipItem(
            tooltipVerticalPosition: TooltipVerticalPosition.TOP,
            displayIndex: 0,
            tooltip: (controller) {
              return  Padding(
                padding: const EdgeInsets.all(15.0),
                child: MTooltip(title: 'Navigation',description: "Welcome! Use this bar to navigate between different pages of the app.", controller: controller),
              );
             },
            child: BottomNavigationBar(...)

The first page

Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                OverlayTooltipItem(
                  tooltipVerticalPosition: TooltipVerticalPosition.BOTTOM,
                  displayIndex: 1,
                  tooltip: (controller) {
                    return Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: MTooltip(
                          title: '..',
                          description:
                              "...",
                          controller: controller),
                    );
                  },
                  child: const Text(
                    '...',
                    style:
                        TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
                  ),
                ),
                const SizedBox(height: 16.0),
                OverlayTooltipItem(
                  tooltipVerticalPosition: TooltipVerticalPosition.BOTTOM,
                  displayIndex: 2,
                  tooltip: (controller) {
                    return Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: MTooltip(
                          title: '...!',
                          description:
                              "..",
                          controller: controller),
                    );
                  },
                  child: TextField(
                    controller: tripName,
                    decoration: const InputDecoration(
                      labelText: '..',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(height: 16.0),
                OverlayTooltipItem(
                  tooltipVerticalPosition: TooltipVerticalPosition.BOTTOM,
                  displayIndex: 3,
                  tooltip: (controller) {
                    return Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: MTooltip(
                          title: '..',
                          description:
                              "...",
                          controller: controller),
                    );
                  },
                  child: TextField(
                    controller: tripDesc,
                    decoration: const InputDecoration(
                      labelText: '...',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(height: 16.0),
                ElevatedButton(
                  onPressed: newTrip,
                  child: const Text('Submit'),
                ),
              ],

Output:

[PrimeTheFirst]

@Deuque

[Deuque]

@PrimeTheFirst What is the issue with what you have? Is it the padding?

[Deuque]

If the padding is the issue, you can try reducing the padding around the tooltip,

                return Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: MTooltip(
                          title: '..',
                          description:
                              "...",
                          controller: controller),
                    );

[PrimeTheFirst]

@PrimeTheFirst What is the issue with what you have? Is it the padding?

No the inputs and text is not being highlighted. It should be white should it not as visible in the example? Expected:

[Deuque]

@PrimeTheFirst Oh I see, you should add a background color to the widget, because the tooltip highlights the exact widget.

The tooltip doesn’t automatically add white colors, (imagine a scenario where someone wants a blue background)

So you need to design the exact widget you want to be highlighted. If you want a white background, just add a white background to the textfield

[PrimeTheFirst]

just add a white background to the textfield

@Deuque But I only want it to have that background color when the tooltip is on it. Not all the time

[PrimeTheFirst]

On testing it however, it is producing the expected output. Thanks!