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 useful for long text with icons. 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.

Tooltips could be used as helpful hints for a user to navigate, with prompts such as "Take elevator to Floor 2" at a certain node on the map.

A complete class that uses the code snippets in this guide can be found in the Mappedin iOS Github repo: TooltipsVC.kt

Drawing Tooltips

When creating a Tooltip, the app specifies some HTML to display and the node to attach it too. The tooltip will be anchored to a specified node or coordinate in one of eight anchor orientations, which are defined in MPIOptions.TooltipAnchor. The possible anchor types are top, bottom, left, right, topLeft, topRight, bottomLeft, and bottomRight. This describes the position of the tooltip relative to the node or coordinate to which it is attached. Tooltip options such as interactivity and collision rank are specified using MPIOptions.Tooltip.

The code below uses createTooltip to create a tooltip and store its Id. Note that you can add a tooltip to a coordinate or node.

Copy
mapView?.createTooltip(
    node: entrance,
    contentHtml: """
    <div style=\"background-color:white; border: 2px solid black; padding: 0.4rem; border-radius: 0.4rem;\">
    \(location.name)
    </div>
    """,
    tooltipOptions: MPIOptions.Tooltip(collisionRank: MPIOptions.CollisionRankingTiers.medium)) {
        id in
        if (id != nil) {
            tooltipId = id
        }
    }

Custom Tooltips

While regular Tooltips come with some base styling, custom tooltips allow an app to have complete control over the element's appearance. Creation is similar to a regular tooltip, with the addition of a CSS selector string that allows the SDK to target the tooltip.

The code below uses createCustomTooltip to create a tooltip and store its Id:

Copy
mapView?.createCustomTooltip(
    coordinate: coordinate,
    contentHtml: """
        <div class="my-tooltip-wrapper" style="position: absolute;">
           <div class="tips" style="filter: drop-shadow(0 0 2px #00000050);">
               <div style="background: red; color: white;padding: 10px;border-radius: 10px;">
                   Tool Tip
               </div>
           </div>
        </div>
        """,
    selector: ".my-tooltip-wrapper"
){ id in
    createdTooltipId = id
}

A complete class that uses the code snippets in this guide can be found in the Mappedin iOS Github repo: TooltipsVC.kt