FineReport Tip: Hover to Display Fixed-URL Image in Decision Reports (Fix Table Jitter)

The article addresses the need to show an image when the mouse hovers over a cell in a FineReport decision report, noting that the previous Bootstrap‑based implementation caused the table to "jitter" during hover.

To solve this, the author abandons Bootstrap and adopts jQuery UI, which provides richer UI components such as tooltips.

Step 1: Download jQuery UI https://jqueryui.com/download/ After scrolling to the bottom of the download page, click the download button to obtain the package.

Step 2: Place the library files

Extract the zip and copy the minified and non‑minified files into the FineReport environment:

C:\FineReport_10.0\webapps\webroot\scripts\css\lib

C:\FineReport_10.0\webapps\webroot\scripts\js\lib

The *.min versions are smaller and load faster for production, while the unminified versions are convenient for debugging; either can be used.

Step 3: Dynamically load the CSS and JS

function dynamicLoadJs(url) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
}

function dynamicLoadCss(url) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = url;
    head.appendChild(link);
}

dynamicLoadCss('http://localhost:8075/webroot/scripts/css/lib/jquery-ui.css');
dynamicLoadJs('http://localhost:8075/webroot/scripts/js/lib/jquery-ui.min.js');

Step 4: Modify the report block initialization

After a short timeout, clear any existing title attributes on table cells and attach a jQuery UI tooltip to the cells in column E. The tooltip returns an <img> tag that points to a fixed URL.

setTimeout(function () {
    $(".x-table td").each(function () {
        $(this).attr("title", "");
    });
    // Assume column E should show the hover image; the image URL is a fixed address.
    $(".x-table td[id^=E]").tooltip({
        content: function () {
            return '<img width=180 height=250 src="https://www.fanruan.com/images/logo-fanruan.png" />';
        },
        show: { effect: "fadeIn", duration: 200 },
        hide: { effect: "fadeOut", duration: 200 }
    });
}, 1000);

Step 5: Preview the effect

Save the template and click “PC Preview”. Hovering over any cell in column E displays the specified image, and the table no longer jitters.