Monday 16 January 2017

TOOL-TIP FOR THE REPORT COLUMN




The tool-tip displaying report column while hovering on the another report column.




STEP 1:
l   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.
l   In Column Formatting, apply this Html code in the HTML Expression
        
        <span data-tooltip="Department : #DEPT# &#xa;Manager : #MGR#">#ENAME#</span>


l   “Department : #DEPT# &#xa;Manager : #MGR#” this will be displayed while hovering on to the employee name and “&#xa” this is used to display text in the new line.



STEP 2:
l    Click on the edit page icon
l    Go to css
l    Apply this code in the inline Region



 /* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  display: inline-block;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* 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 */
[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

2 comments:

  1. This list is in reality very beneficial. in an assessment of top notch internet net websites I have visited, you moreover could probably in all like LaHood blanket the little thru the guide to test in this internet websites.
    Oracle Fusion cloud procurement Online Training
    Oracle Fusion cloud procurement Online Training

    ReplyDelete
  2. Suppose i am having apex item with label Dept :tooltip("i need to put tooltip in that i want to display deptno(header) below that list of deptno in that particular table") how we can do.

    ReplyDelete