Paradigm BI Posts

PowerBI Page Tooltips revisited

By Mike-Allen / Jan 13, 2021 / Custom Visuals HTML Paradigm BI
Facebook Twitter Google + LinkedIn Pinterest Email Share...

Recently we released a new HTML Viewer,  ParaHtmlViewer, now available from the store Business Apps – Microsoft AppSource. I had previously posted about creating PowerBI Page Tooltips using a different custom visual Page Tooltips with the HTML Content Custom Visual so I thought I would revisit with the new visual.

Here's a picture to give you an idea of what this entails.

We have had an election since I last posted a blog on this but I haven't updated the demo data yet!

ParaHtmlViewer provides a simplified method of binding data to HTML here is the HTML used to create this tooltip:

<html>
<body>
<div style='text-align: center; width: 240px; padding-left: 0px; line-height: 12px;'>
<p style='text-align: center; color: darkblue;' >Electorate <span id='Electorate'></span></p>
 <p style='text-align: center; font-size: 12px;' >Namesake: <span id='Namesake'></span></p>
 <p>MP <span id='MP'></span> </p>
 <p>Party: <span id='Party'></span></p>
 <p>Electors: <span id='Electors'></span></p>
 </div>
 </body>
 </html>

Salient points are that the div has a 'width' to help with formatting and the data fields are specified with an 'id'. I've uses 'span' to insert text into paragraphs, but you can use other tags including 'img'. If you don't want to write the HTML yourself a developer would have no trouble understanding these design requirements.

The visual is placed on a tooltip page, which is a normal page with 'Tooltip' turned on in 'Page Information'.

This is the tooltip page  and the field settings:

From the top, we have the ID field, which makes the filter work for the tool top, this field is set to 'Off' in 'Category Settings' on the format page.

The HTML template, and there must only be one, is retrieve from Azure Storage by Power Query:

let
    Source = Lines.ToText(
        Lines.FromBinary(
            AzureStorage.BlobContents(ParaHTMLPath)))
in
    Source

That's my favourite query, 'ParaHTMLPath' is a parameter, but you can get the HTML from your own favourite data source of course!

The data is very standard, in the original example the data was pivoted, so in the demo, I just unpivoted to get the data into nice columns. I have updated the demo with this example so that you can look at this.

At the bottom of the field pane, ensure that 'Keep all Filters; is turned on otherwise the tooltip page will lose context.

When you build the tooltip page set the view to 'Actual Size'. Then set the page size to 'tooltip' to get the default tooltip page size and then 'custom' to do a little more. On the visual format pane, there are several settings that you can adjust, I wanted a nice tight fit with no border and no category, so I turned them off. I did have trouble selecting the visual at times, so on the View menu, I selected the 'Selection' pane so that I could get to it more easily. You may need to experiment with the controls under 'ChartRender' to get the layout that you require, I adjusted these controls and the CSS styling on the .div; of the HTML several times until I was happy with the result.

There are lots of other things you can do with the ParaHTMLViewer, for this example, you can download the Power BI Tooltip Demo and the Data Extract and the Coordinates Extract

Comments are closed