The tool-tip displaying
report column while hovering on the another report column.
STEP
1:
1:
l
ENAME, DEPARTMENT and MANAGER is the report Column.
ENAME, DEPARTMENT and MANAGER is the report Column.
l
Make the ENAME column’s display type as
“Display As Text”. DEPARTMENT and MANAGER column’s display
type as hidden.
Make the ENAME column’s display type as
“Display As Text”. DEPARTMENT and MANAGER column’s display
type as hidden.
l In Column
Formatting, apply this Html code in the HTML Expression
Formatting, apply this Html code in the HTML Expression
<span
data-tooltip=”Department : #DEPT# 
Manager :
#MGR#”>#ENAME#</span>
data-tooltip=”Department : #DEPT# 
Manager :
#MGR#”>#ENAME#</span>
l
“Department : #DEPT# 
Manager :
#MGR#”
this will be displayed while hovering on to the employee name and “
”
this is used to display text in the new line.
“Department : #DEPT# 
Manager :
#MGR#”
this will be displayed while hovering on to the employee name and “
”
this is used to display text in the new line.
STEP
2:
2:
l
Click
on the edit page icon
Click
on the edit page icon
l
Go to
css
Go to
css
l
Apply
this code in the inline Region
Apply
this code in the inline Region
/* Add this attribute to the element that
needs a tooltip */
needs a tooltip */
[data-tooltip]
{
{
position: relative;
display: inline-block;
}
/*
Hide the tooltip content by default */
Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after
{
{
visibility: hidden;
opacity: 0;
pointer-events: none;
}
/*
Position tooltip above the element */
Position tooltip above the element */
[data-tooltip]:before
{
{
position: absolute;
padding: 10px;
width: 160px;
top:100%;
left:100%;
border-radius: 10px;
background-color: #000;
color: #fff;
content: attr(data-tooltip);
}
/*
Show tooltip content on hover */
Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after
{
{
visibility: visible;
z-index: 999;
white-space:pre-wrap;
opacity: 1;
}
.t-Body-nav
{
{
overflow: hidden;
}
By
Angel M
Recent Posts