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!

pbihtmltooltip

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.

PBIFieldWell.PNG

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.

pbitooltip

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.

pbicommontooltip

 

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 tooltipsLukasz 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

 

pbitooltiptesting

Advertisements

5 thoughts on “Adding an HTML Tooltip in ArcGIS Maps for Power BI

  1. Nice. Keep up with these blog posts. As an ArcGIS user, I have realised that my first couple of dashboards are very amateur. Tips like this are really useful. Sharing.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s