FineReport Tip: Show Fixed‑URL Image on Hover in a Standard Report (Part 1)

1. Prepare the template

Create a new template and a dataset ds1 with the SQL query select * from 销量.

Add a parameter panel: insert a "Dropdown Multi‑Select" control named col, set its data dictionary type to "Formula", and use the expression TABLEDATAFIELDS("ds1") as the actual value.

Design the table as shown in the screenshots and preview the fill‑in view.

2. Import JavaScript and CSS files

Bootstrap’s tooltip component requires both its CSS and JavaScript files. The tutorial includes screenshots of the required <link> and <script> tags.

Bootstrap is an open‑source front‑end framework that provides a grid system, CSS component library, and JavaScript plugins such as modals, tooltips, popovers, dropdowns, and carousels.

2.1 Include the JavaScript file

2.2 Include the CSS file

3. Set the "load finished" event

Add a "load finished" event to the report as illustrated.

4. JavaScript code for the tooltip

// Assume column E should show an image on hover; the image URL is a fixed base URL + xxx.jpg.
$(".x-table td[id^=E]").tooltip({
  placement: "right",
  html: true,
  title: function() {
    var goodsno = $(this).html(); // get the current cell value
    return '<img width=180 height=250 src="https://www.fanruan.com/images/logo-fanruan.png" />';
  }
});

5. Effect preview

After saving the template and clicking "Fill‑in Preview", hovering over any cell in column E displays the specified image, as shown in the final screenshot.