hideDelay for toolTip on Layers (MapCircleLayer, MapArcLayer, MapLineLayer etc..)

[Dhananjay Ghongane]

I couldn't find a way to add hideDelay on Layers for tooltip.  Could you help please!

[Hariharasudhan Kanagaraj]

 Hi Dhananjay,

We have a hide delay property in the MapTooltipSettings that accepts values in seconds, and it is used to add the necessary delay to hide the tooltip. However, the current behavior is that the hide delay property will not work for point interactions like hovering, and it will only work for touch interactions.

Regards,

Hari Hara Sudhan. K.

[Dhananjay Ghongane]

hide delay property works for shape and bubble is there something special for layers?,  At least default delay on hover or click of layer on desktop is very less making difficult to read tooltip

[Hariharasudhan Kanagaraj]

Hi Dhananjay,

As mentioned in your query, the hide delay property is working properly for ShapeLayer, BubbleLayer and for other vector layers also in the touch interaction only and the hide delay property is not supported for the point Interaction like hovering. For Web platform and Desktop, the tooltip will be rendered only in hovering and for the touch interaction devices only the tooltip will be rendered while tapping or clicking the layer.

So, we would like to let you know that currently, we don’t have support for Provide hide delay support for the tooltip after the cursor moved while hovering on maps. However, we have considered your requirement as a new feature and logged a feature request for it in our feedback portal.

We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature with the feedback below.

Feedback Link: https://www.syncfusion.com/feedback/46153.

Regards,

Hari Hara Sudhan. K.

[Dhananjay Ghongane]

Thank you b
As per my observations : 
hide delay property is working properly for ShapeLayer, BubbleLayer in point Interaction like hovering.

[Hariharasudhan Kanagaraj]

Hi Dhananjay,

We have prepared a sample with shape layer and bubble layer and set ten seconds to the hide delay property in the MapTooltipSettings. Here, when we hover over the shape layer or bubble layer, the tooltip will be render and when we move the cursor away then the tooltip will be hidden suddenly. However, if we render the tooltip using the touch interactions, then the tooltip will be hidden based on the seconds given in the hide delay property.

Kindly refer the code snippet below:

class _MyHomePageState extends State<MyHomePage> {

  late MapShapeSource dataSource;

  late List<DataModel> data;

  late Random random;

 

  @override

  void initState() {

    data = <DataModel>[

      DataModel(const MapLatLng(28.7041, 77.1025),

          const MapLatLng(56.1304, -106.3468), 'Asia', 02.0, 280),

      DataModel(const MapLatLng(28.7041, 77.1025),

          const MapLatLng(-9.1900, -75.0152), 'Africa', 05.0, 190),

      DataModel(const MapLatLng(28.7041, 77.1025),

          const MapLatLng(61.5240, 105.3188), 'Europe', 08.0, 37),

      DataModel(const MapLatLng(28.7041, 77.1025),

          const MapLatLng(-25.2744, 133.7751), 'North America', 06.0, 310),

    ];

 

    dataSource = MapShapeSource.asset(

      'assets/world_map.json',

      shapeDataField: 'continent',

      dataCount: data.length,

      primaryValueMapper: (int index) => data[index].continent,

      bubbleSizeMapper: (int index) => data[index].count,

      shapeColorValueMapper: (int index) => data[index].density,

      shapeColorMappers: [

        const MapColorMapper(

            from: 0, to: 100, color: Colors.red, text: '< 100/km'),

        const MapColorMapper(

            from: 101, to: 200, color: Colors.green, text: '100 - 200/km'),

        const MapColorMapper(

            from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'),

        const MapColorMapper(

            from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'),

      ],

    );

 

    random = Random();

    super.initState();

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Padding(

        padding: const EdgeInsets.all(10),

        child: SfMaps(layers: [

          MapShapeLayer(

            source: dataSource,

            tooltipSettings: const MapTooltipSettings(

              hideDelay: 10,

              color: Colors.white,

              strokeWidth: 2,

              strokeColor: Colors.black,

            ),

            shapeTooltipBuilder: (context, index) {

              return Container(

                height: 50,

                width: 100,

                color: Colors.amber,

                child: Center(

                  child: Text(

                    data[index].continent,

                  ),

                ),

              );

            },

            bubbleTooltipBuilder: (context, index) {

              return Container(

                padding: const EdgeInsets.only(left: 5, top: 5),

                height: 40,

                width: 100,

                child: Column(

                  children: [

                    Row(

                      children: [

                        const Text('Depart : '),

                        Text('${random.nextInt(12)}AM'),

                      ],

                    ),

                  ],

                ),

              );

            },

          ),

        ]),

      ),

    );

  }

}

 

class DataModel {

  DataModel(this.from, this.to, this.continent, this.count, this.density);

 

  final MapLatLng from;

  final MapLatLng to;

  final String continent;

  final double count;

  final double density;

}

 

We have shared the recording below for your reference. This is the reason we have created a FR to provide the hide delay support to the tooltip in point interactions as well.

Feedback Link: https://www.syncfusion.com/feedback/46153.

If you still feel whether the hideDelay property is working properly for the shape layer and bubble layer in the point Interactions like hovering, then we recommend you share any recording and code snippet from you end. This will be very useful for us to provide the best possible solution from our end.

Regards,
Hari Hara Sudhan. K.

Attachment: _183944_e04ba329.zip