markerTooltipBuilder property

IndexedWidgetBuilder? markerTooltipBuilder

Returns the widget for the tooltip of the MapMarker.

To show the tooltip for markers, return a customized widget in the MapLayer.markerTooltipBuilder. This widget will then be wrapped in the in-built shape which comes with the nose at the bottom.

The MapLayer.markerTooltipBuilder will be called when the user interacts with the markers i.e., while tapping in touch devices and hovering in the mouse enabled devices.

late List<Model> _worldMapData;
late MapShapeSource _mapSource;

void initState() {
  _worldMapData = const <Model>[
     Model('Brazil', -14.235004, -51.92528),
     Model('Germany', 51.16569, 10.451526),
     Model('Australia', -25.274398, 133.775136),
     Model('India', 20.593684, 78.96288),
     Model('Russia', 61.52401, 105.318756)

  _mapSource = MapShapeSource.asset(
    shapeDataField: 'name',
    dataCount: _worldMapData.length,
    primaryValueMapper: (int index) => _worldMapData[index].country,


Widget build(BuildContext context) {
  return Scaffold(
     body: Padding(
       padding: EdgeInsets.all(15),
       child: SfMaps(
         layers: <MapLayer>[
             source: _mapSource,
             initialMarkersCount: _worldMapData.length,
             markerBuilder: (BuildContext context, int index){
                return MapMarker(
                 latitude: _worldMapData[index].latitude,
                 longitude: _worldMapData[index].longitude,
             markerTooltipBuilder: (BuildContext context, int index) {
               if(index == 0) {
                 return Container(
                   child: Icon(Icons.airplanemode_inactive),
                 return Container(
                      child: Icon(Icons.airplanemode_active),

class Model {
 const Model(, this.latitude, this.longitude);

 final String country;
 final double latitude;
 final double longitude;

See also:

  • MapLayer.tooltipSettings, to customize the color and stroke of the tooltip.
  • SfMapsThemeData.tooltipBorderRadius, to customize the corners of the tooltip.


final IndexedWidgetBuilder? markerTooltipBuilder;