[OBIEE11g] - Different ToolTip for different rows when user hovers on it in OBIEE 11g reports

OBIEE supports the functionality of adding ToolTip to the report but at column level [You see the same tooltip when you hover on any row in that column]. But I encountered a weird requirement of displaying a different tooltip to users when user hovers on different row in that column of a particular report.

Displaying a unique tooltip for different rows is not an inbuilt feature of OBIEE 11g but it was found achievable by using Narrative view. You need to add custom JavaScript code, HTML code and Some CSS [If you want a good design for your report].

Here are the steps that I followed:

I have used the prebuilt “Sales by brand” report which is available by default when you install OBIEE 11g

• Open the “Sales by brand” report or any report of your choice.

• Above the report click on “New View” -> “Other views” -> Select “Narrative” view

• Narrative view pane is added below the report. Click on “edit view” at the top of the Narrative view pane

• You will be redirected to a page where you can insert your custom JavaScript, HTML or CSS

• You can enter the following code in “Prefix” area. You can define table properties like “border” and column headings over here

<form id=”form1″>
<table border=”1″>
<th bgcolor=”grey”>
Brand</th>
<th bgcolor=”grey”>
Billed Quantity</th>

• Enter following code in “Narrative” section. You can refer to a particular column selected in criteria as @1- for first column, @2- for second column….etc and display it in the report from here. I have made the third column Hidden because I will be formatting the rows base on this hidden row value and user need not see this column.

<tr>
<td>@2</td>
<td>@3</td>
<td style=”display:none;”>@4</td>
</tr>

• Enter following code in “Postfix” Section. Over here JavaScript magic begins

</table>
</form>
<script type=”text/javascript” >
var formm=document.getElementById(“form1″);
var trs = formm.getElementsByTagName(“tr”);
var tds=formm.getElementsByTagName(“td”);

trs[1].setAttribute(“title”, “2008″);
trs[2].setAttribute(“title”, “2008″);
trs[3].setAttribute(“title”, “2008″);
trs[4].setAttribute(“title”, “2009″);
trs[5].setAttribute(“title”, “2009″);
trs[6].setAttribute(“title”, “2009″);
trs[7].setAttribute(“title”, “2010″);
trs[8].setAttribute(“title”, “2010″);
trs[9].setAttribute(“title”, “2010″);
var i=1;
var cols=2;
while(i<=trs.length)
{
var values=tds[cols].innerText;
if(values<=’300000′) { trs[i].setAttribute(“bgColor”, “#15FB20″); }
else if(values<=’500000′) { trs[i].setAttribute(“bgColor”, “red”);}
else if(values<=’800000′) { trs[i].setAttribute(“bgColor”, “yellow”);}

i++;
cols=cols+3;
}
</script>

Here, is the screenshot of what the final output looks like !!

What does the JavaScript code in postfix does ?

• I am getting all the td tags in an array from the form “form1” using following code :

var formm=document.getElementById(“form1″);

var trs = formm.getElementsByTagName(“tr”);

var tds=formm.getElementsByTagName(“td”);

• I am setting “ToolTips” using “Title” attribute using the following code

trs[1].setAttribute(“title”, “2008″);

trs[2].setAttribute(“title”, “2008″);

trs[3].setAttribute(“title”, “2008″);

trs[4].setAttribute(“title”, “2009″);

trs[5].setAttribute(“title”, “2009″);

trs[6].setAttribute(“title”, “2009″);

trs[7].setAttribute(“title”, “2010″);

trs[8].setAttribute(“title”, “2010″);

trs[9].setAttribute(“title”, “2010″);

• This is the logic I am using to give colors to the individual rows based on the column value that  I have kept “hidden”

var i=1;

var cols=2;

while(i<=trs.length)

{

var values=tds[cols].innerText;

if(values<=’300000′) { trs[i].setAttribute(“bgColor”, “#15FB20″); }

else if(values<=’500000′) { trs[i].setAttribute(“bgColor”, “red”);}

else if(values<=’800000′) { trs[i].setAttribute(“bgColor”, “yellow”);}

i++;

cols=cols+3;

}