1. Go to report column Attribute Page, under the col you would like to have tooltip, put following into the Element Attribute field:
title="your hints here"
2. Go to page, put following into Global Function Section, you can change the color/background color as your own choice:
$( function() {
$("#DD").tooltip({
position: {
my: "left+5 center", at: "right center",
using: function( position, feedback ) {
$( this ).css( position ).css('background-color','blue').css('color','white');
$( "<div>" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
} );
3. Put following into the inline css section(you can add the arrow class in above script to let the hint having an arrow..)
.ui-tooltip, .arrow:after {
background: black;
border: 2px solid white;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px "Helvetica Neue", Sans-Serif;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 12px;
overflow: hidden;
position: absolute;
left: 10%;
margin-left: -15px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}
That's IT!
If you have a Classic Report which you want to show another Column(B)'s value as a Tooltips when you hover a column(A), you can do this:
1. Go to report Column Attribute part, in A's HTML expression Section, put followings
<span title="#B#"></span>
2. Put the same javascript/css into the Page's Global Function/Inline css section as described about.
That's IT!
Update: if you want to show multiple col values on the tooltips, just put them all in the title section(for example, you have B C D column and would like to show them in A col's tooltip, just put followings in A's html expression Section, you can also put some explanation between the columns.
<span title="#B#
#C#
#D#"></span>
