JS Display Hyperlink Options when Mouse Moves in

1.1 Problem Description

When a cell contains multiple hyperlinks, you have to click the hyperlink first to pop up the hyperlink options and then choose the desired one. If the desired hyperlink can be choosed after only one click , the user experience will be better.

In this document, a method is introduced to let all hyperlink options be displayed when the mouse moves to the hyperlink.

1.2 Solution

The cell's jQuery event mouseover can control the effect when mouse move to the cell, and event mouseout can control the effect when mouse move out of the cell.

In addition, you need to determine whether there are hyperlinks in the cell or not.

2.1 Design Report

New normal report, the text in cell B2 is Hyperlink 1, and the text in cell B3 is Hyperlink 2.

Add 3 hyperlinks to cell B2:

Add 1 hyperlink to cell B3:

2.2 Add event

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

The JS codes：

$('td').mouseover(function(){
//Set mouse move to cell event
var $link=$(this).find('.linkspan');
//If it contains a hyperlink
if($link.length>0){
//If it contains multiple hyperlink alternatives, the menu will pop up, otherwise it will not be processed
     if($link.attr('onclick').replace('return').indexOf('return')>=0){
     //Call a hyperlink click event
$link.click();
var x=window.event.x;
var y=window.event.y;
//Set the left and upper positions of the pop-up menu as the current position of the mouse, or modify it as needed
$('.menu').css('left',x);
$('.menu').css('top',y);
}
}
}).mouseout(function(e){
//Set the mouse out of the cell event, you need to hide the original menu
var $link=$(this).find('.linkspan');
if($link.length>0){
var $target=$(e.toElement);
if(!$target.hasClass('menu')){
//Hide pop-up menu
$('.menu').hide();
}}
})
Show Code

2.3 Show results

Save report, select Pagination Preview and the results are as shown in the beginning.

Tips: Not support mobile devices.

JS_Hyperchain_suspension.cpt