Hey FME'ers,

I just posted a video of how to create tooltips in an HTML report:

https://youtu.be/O6gT58AnvuA

Basically, I create an HTML table and one of the cells takes up too much space for reasonable viewing; so I turn its content into a tooltip to save space.

The important part is the code, which you can't get from the video, so here it is. The content of the cell is created with an AttributeManager as:

<span>Hover for more info!</span>
<div>@Value(attributeName)</div>

Then there is some custom HTML to add to the top of the report. Use a Custom HTML option in the HTMLReportGenerator with this code:

<style>
div {
  background-color: yellow;
  padding: 20px;
  display: none;
  position:fixed;
  top:80px;
  right: 350px;
}
  
span:hover + div {
  display: block;
}
</style>

Now your content will appear in a tooltip, rather than a table cell.

I hope this is useful. Watch the video if you need more details about where to place the above code.