Mappedin Logo

Developer

Mappedin Documentation

Web SDK v4: Tooltips

Web SDK v4: Tooltips

The previous guides introduced markers, Floating Labels, and Flat Labels. Here we take a look at one more way to add helpful content to the map that is tied to a position: tooltips. Mappedin Web Application uses tooltips to help the user to navigate with prompts such as "Take elevator to Floor 2" at a certain node on the map.

Setup

Tooltips

A Tooltip similarly as 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. Tooltips can also be clickable, which makes them ideal for showing connection points such as elevators and switching to the following map after an interaction from the user.

To create a simple tooltip:

mapView.createTooltip(instruction.node, {
text: `<span style="background-color: azure; padding:0.2rem; font-size:0.7rem">${instruction.instruction}</span>`
});

More about tooltip options and anchors in the documentation for createTooltip -method.

On this page

Search Our Docs

Sign Up

© 2020 Copyright Mappedin, All Rights Reserved. View our Privacy Policy