I. Overview
1.1 Problem
Hover the mouse on any cell in the table, the preset image will be displayed, and the image disappears when the mouse leaves the cell. As shown below:
1.2 Solution
Reference the CSS file and JavaScript file, and place the image to be displayed in the current cell in a Tooltip function (floating prompt) to achieve the effect of displaying the image when the mouse hovers on the cell.
II. Sample
2.1 Template preparation
To create a new dataset query, use the following SQL statement: SELECT * FROM Sales
Insert the formula in B1: split($col, ",")
Insert the formula in A2: ds1.select(#0)
Insert the formula in B2: ds1.value(A2, B1)
Add all borders.
Add the parameter [col] to the parameter pane, and select the drop-down box widget.
Widget value is [formula], enter: TABLEDATAFIELDS("ds1")
Select data dictionary type to be [formula], input [actual value] as: TABLEDATAFIELDS("ds1")
2.2 Reference files
Click [template] > [Web template attributes]. In the [reference Css] and [references JavaScript] tab, quote bootstramp js and css files, as shown below:
2.3 Add loading end event
Click [template] > [template Web attributes] > [Pagination preview], was added in the event setting [loading end] event, as shown below:
javascript:
$(".x-table td[id^=E]").tooltip({
placement: "right",
html: true,
title: function() {
var goodsno = $(this).html();
return '<img width=100 height=30 src="https://www.finereport.com/en/wp-content/themes/Newweb/images/header/header_logo.png" />';
}
});
2.4 Preview effect
Click the pagination preview, you can see that when the mouse hovers over the E column, the image will be displayed.
Previous：JS Display Different Content According to Device Types
