Adding an HTML Tooltip in ArcGIS Maps for Power BI

With the preview launch of ArcGIS Maps for Power BI, one unexpected improvement is the ability to enhance tooltips. Whether you would like to add an image, stylized text, a table, or a list; you have a few different options to customize a tooltip with HTML. While not all HTML functionality is available, you can still make a fairly engaging tooltip!

DISCLAIMER: I do not know if this is or will be officially supported or documented (UPDATE: it’s not and won’t be), so the following tooltip functionality may change at any point. I’m hopeful that it does not, and that Power BI may add similar functionality for its other visuals. In the meantime, don’t put this into a production report with the expectation that it will always work. 

How is this enhanced formatting accomplished? Most visuals in Power BI have a dedicated Tooltip field, but the ArcGIS map does not. Instead, for maps that only rely upon Latitude and Longitude, you can create a calculated column and add it to the unused Location field. The calculated column contains a series of concatenated strings that blend DAX with HTML. Hopefully when or if a real Tooltip field is added, you can use the same column and simply add it to Tooltip in place of Location.

For my custom tooltip, I used an <img> tag to add my company’s BlueGranite logo to the outage map that I discussed a few days ago. I then combined my Power BI column references with their “Reported” and “Restoration Estimate” labels. Finally, I added a table using the <table> tag and added references to the appropriate Power BI columns within the HTML. Basic inline CSS also works, which provides a different color for the table headers.

It’s even possible to handle conditional formatting with DAX. I used IF() to supply alternate colors in the table details, which you can see in action in the following GIF.

If you are interested in trying it out on your own, here’s the latest version of the code that built my sample tooltip:

In case you are wondering, I also tried this with the Tooltip field in other Power BI visuals, but it only displays the text and does not render the HTML.

What clued me in on the new enhanced tooltip? If you add a reference layer to your ArcGIS Map, you can click on various features and will not only see formatted text, but charts in tooltips! Lukasz Pawlowski from the Microsoft Power BI team has a good video demonstrating the new maps on his blog, which shows off the enhanced tooltip starting at around the 2:40 mark. (CLARIFICATION: Those charts are built-in. This method is a DAX hack).

Finally, here is a running list of what works and does not. If anyone with better skills in this area would like to test it out and potentially improve upon or correct the items, I would be grateful.

Working

• line break <br> tags
• paragraph <p> tags
• bold and italics with <b> and <em>
• tables with <table> tags
• lists with <ol> and <ul> tags – lists do not show bullets or numbers though
• inline CSS styling

Not working

• link <a> tags – href links appear but do nothing when you click on them
• iframes with <iframe> tags – frame border appears but does not work
• various <input> tags – appear, but of course there’s nothing to do with the input
• inline Javascript with <script> tags – in-progress attempts to use basic Javascript have not worked

Read 10 Ways to Create Maps in Microsoft Power BI.