Tooltips

A tooltip is similar to a marker except it has a mechanism to avoid collisions with other items on the map by positioning itself relative to the point where it's added. This is done automatically and makes it ideal for longer text and an icon.

Drawing Tooltips

Like markers, tooltips can be placed at either a MappedinNode or MappedinCoordinate and automatically handle rotation and repositioning to face the camera. Unlike markers, tooltips will also adjust positioning for the presence of nearby tooltips.

Use the createTooltip method to draw a tooltip at a node.

Copy
const departure = mapView.current?.venueData?.locations.find(
  (l) => l.name === "Cleo"
);
const destination = mapView.current?.venueData?.locations.find(
  (l) => l.name === "Pandora"
);
const directions = departure?.directionsTo(destination);

mapView.current?.drawPath(directions.path, {});
directions.instructions.forEach((instruction) => {
  mapView.current?.createTooltip(
    instruction.node,
    `<div>${instruction.instruction}</div>`
  );
});

This code snippet selects two locations, then generates directions between them and draws the path. Iterating through the directions, it creates a tooltip at each instruction, such as "Turn left".

The complete code sample demonstrating tooltips at instruction nodes is available on GitHub.

Alternatively, pass a MappedinCoordinate to draw a tooltip at a specified latitude/longitude.

Copy
const coordinate = mapView.current?.currentMap.createCoordinate(
  43.51905183293411, // latitude
  -80.53701846381122 // longitude
);
mapView.current?.createTooltip(coordinate, `<div>Tooltip</div>`);

Removing Tooltips

Tooltips can be removed from the map by passing the tooltip ID to the removeTooltip method. This ID is returned as a promise from createTooltip and can be awaited and stored for later use.

The following code snippet demonstrates creating a marker on polygon touch and storing the id in state. If a tooltip exists when the map is touched subsequently then the existing tooltip is removed.

Copy
const mapView = useRef<MapViewStore>(null);
const [tooltip, setTooltip] = useState<string>();

return (
  <SafeAreaView>
    <MiMapView
      key="mappedin"
      ref={mapView}
      options={{
        venue: "mappedin-demo-mall",
        clientId: "5eab30aa91b055001a68e996",
        clientSecret: "RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1",
      }}
      onClick={async ({ polygons }) => {
        if (tooltip) {
          mapView.current?.removeTooltip(tooltip);
        }
        if (polygons.length > 0) {
          const newTooltip = await mapView.current?.createTooltip(
            polygons[0].entrances[0],
            `<div>Tooltip</div>`
          );
          setTooltip(newTooltip);
        }
        return;
      }}
    />
  </SafeAreaView>
);

Tooltip Rank

The collisionRank option of createTooltip enables you to set the priority or rank of individual tooltips. These are defined in the enum COLLISION_RANKING_TIERS. The default rank is HIGH.

Copy
mapView.current?.createTooltip(node, `<div>Tooltip</div>`, {
  collisionRank: COLLISION_RANKING_TIERS.ALWAYS_VISIBLE,
});

Custom Tooltips

By default, tooltips come with existing HTML styling including a directional arrow and white background. Use the createCustomTooltip method to write your own HTML without any added styling. With this method you must supply a class or id and a selector argument for the map to handle your tooltip.

Copy
mapView.current?.createCustomTooltip(
  node,
  `<div class="custom-tooltip">Tooltip</div>`,
  `.custom-tooltip`,
  {collisionRank: COLLISION_RANKING_TIERS.ALWAYS_VISIBLE},
);

Additional Reading

• Integrate Office Maps with Workspace Reservations