JS Customize the Style of Cell Prompt Text

1.1 Problem Description

How to customize the styles of cell tooltip as shown below?

1.2 Solution

The cell tooltip is realized by using the title attribute in HTML. We can set a custom style through JavaScript and CSS.

2.1 Design Report

1) Create a new report and design the report body as follows:

2) Click A1, select Cell Attributes > Other > Tooltip of cell, and input formula: =$$$.

2.2 Add event

Select Template > Web Attributes, select Pagination Preview, and add a Loading End event.

The JS code is：

var oldTitle = null;
$('td').bind('mouseover mouseout mousemove', function(event) {
	var left = event.pageX;
	var top = event.pageY;
	var ele = event.target;
	var title = ele.title;
	var type = event.originalEvent.type;
	if (type == 'mouseover') {
		oldTitle = title;
		ele.title = '';
		console.log(title);
		if (title.length != 0) {
			var showEle = $('<div></div>', {
				text: title,
				class: 'showTitleBox'
			}).css({
				position: 'absolute',
				top: top + 10,
				left: left,
				border: '1px solid #00cccc', //border
				borderRadius: '5px',	//rounded corner
				background: "#00cccc", //background color
				fontFamily: 'SimHei', //font
				fontSize: '15px' // font size
			})
			showEle.appendTo('body');
		}
	} else if (type == 'mouseout') {
		ele.title = oldTitle;
		$('.showTitleBox').remove();
	} else if (type == 'mousemove') {
		$('.showTitleBox').css({
			top: top + 10,
			left: left
		})
	}
})

Tips：CSS properties can be modified according to the requirements.

2.3 View results

Save the report, select Pagination Preview, and the results are as shown below：

Tips：Not support mobile devices.

js_modify_content_format.cpt