Javascript for Tooltip

[Pratap Reddy]

Hi,

I have a requirement where i need to get tool tip for column in list.

Column is a Description content with almost 100+characters.Due to huge length i have shortened the Description length by Maximum character property to '5'.

when i hover on column. i need a tool tip with full description of 100+characters.

i have tried in simple way drag and drop of HTML Item on both side of Column and used below code it working fine with only manually used Text,but i need to used column(data item) there in order to get the tool tip for every row of the data item.

<Span title="XXXXXXX">
</span>

how can i achieve this?

Thanks in Advance.

[Pratap Reddy]

Hi,

Problem Resolved for Tooltip.

HTML Item1 - <div title="
HTML Item2 - change the source type in HTML Source to data item value and Dataitem value to Data item.
HTML Item3 - ">
HTML Item4 - </div>

but if the data in the dataitem is not proper does it through an error.

Thanks in Advance

[Pratap Reddy]

Hi,

Do u have any size length fixed for the HMTL Code.if so could any one know how to increase length of the data item in HTML Code?

Thanks in Advance

[bdbits]

The Title attribute length is browser dependent. It is not meant to hold lengthy text.

Put your text between the attributes so that it renders as

<div>your really long text goes here</div>

Honestly, I would ask your user/client why it cannot just go in the list. In my opinion, really long tool tips are not a very good user experience.

[Pratap Reddy]

Hi bdbits,

Thanks for your reply.

HTML Item1 - <div title="
HTML Item2 - change the source type in HTML Source to data item value and Dataitem value to Data item.
HTML Item3 - ">
HTML Item4 - </div>

i have used above concept its working good.now the concept is if i need to add more dataitems and text in one column or one Tolltip.is it possible?

Thanks in Advance.

[bdbits]

Your data item can concatenate multiple things together. Though as I said, I would try to keep the length down to something reasonable.

[dougp]

No JavaScript needed.  No length limitation.
I just found this example report.  I don't remember where I got it.

Code Select Expand

<report xmlns="http://developer.cognos.com/schemas/report/9.0/" application="true" expressionLocale="en" useStyleVersion="10"><!--RSU-SPC-0093 The report specification was upgraded from &quot;http://developer.cognos.com/schemas/report/8.0/&quot; to &quot;http://developer.cognos.com/schemas/report/9.0/&quot; at 2013-3-4. 13:11:39--><!--RSU-SPC-0093 The report specification was upgraded from &amp;amp;quot;http://developer.cognos.com/schemas/report/8.0/&amp;amp;quot; to &amp;amp;quot;http://developer.cognos.com/schemas/report/9.0/&amp;amp;quot; at 2013-3-1. 13:50:37-->
<modelPath>/content/folder[@name=&apos;Samples&apos;]/folder[@name=&apos;Models&apos;]/package[@name=&apos;GO Sales (query)&apos;]/model[@name=&apos;model&apos;]</modelPath>
<drillBehavior/>
<layouts>
<layout>
<reportPages>
<page name="Page1">
<style>
<defaultStyles>
<defaultStyle refStyle="pg"/>
</defaultStyles>
</style>
<pageBody>
<style>
<defaultStyles>
<defaultStyle refStyle="pb"/>
</defaultStyles>
<CSS value="padding:0px"/></style>
<contents><table><style><CSS value="border-collapse:collapse;width:100%;background-color:rgb(5,60,102)"/><defaultStyles><defaultStyle refStyle="tb"/></defaultStyles></style><tableRows><tableRow><tableCells><tableCell><contents><textItem><dataSource><staticValue>Active Report Techniques</staticValue></dataSource><style><CSS value="color:white;font-size:14pt;font-weight:bold"/></style></textItem></contents><style><CSS value="height:57px;width:250px;padding-left:20px"/></style></tableCell><tableCell><contents><textItem name="Technique_Name1"><dataSource><staticValue>Inline CSS Tooltips</staticValue></dataSource><style><CSS value="color:white;font-size:14pt;font-weight:bold"/></style></textItem></contents><style><CSS value="text-align:right;padding-right:20px"/></style></tableCell></tableCells></tableRow></tableRows></table><block>
<contents><block>
<contents><block>
<contents><HTMLItem>
<dataSource>
<staticValue>&lt;style type=&quot;text/css&quot;&gt;

a.tooltip{
    position:relative; /*this is the key*/
    z-index:24;      text-decoration:none}

a.tooltip:hover{z-index:25;}

a.tooltip span{display: none}

a.tooltip:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:14em;
    border:2px solid #000000;
   background-color:#ffffff; color:#000;
   }

&lt;/style&gt;
</staticValue>
</dataSource>
</HTMLItem><list horizontalPagination="true" name="List1" refQuery="salesQuantity">



<noDataHandler>
<contents>
<block>
<contents>
<textItem>
<dataSource>
<staticValue>No Data Available</staticValue>
</dataSource>
<style>
<CSS value="padding:10px 18px;"/>
</style>
</textItem>
</contents>
</block>
</contents>
</noDataHandler>
<style>
<defaultStyles>
<defaultStyle refStyle="ls"/>
</defaultStyles>
<CSS value="border-collapse:collapse"/>
</style>
<listColumns><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Product line"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lc"/></defaultStyles><CSS value="vertical-align:middle"/></style><contents><textItem><dataSource><dataItemValue refDataItem="Product line"/></dataSource></textItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Revenue"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lm"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Revenue"/></dataSource></textItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style/><contents><textItem><dataSource><staticValue/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><CSS value="text-align:center;padding-left:8px"/></style><contents><table><style><defaultStyles><defaultStyle refStyle="tb"/></defaultStyles><CSS value="border-collapse:collapse;width:100%"/></style><tableRows><tableRow><tableCells><tableCell><contents><HTMLItem>
<dataSource>

<reportExpression>&apos;&lt;a class=&quot;tooltip&quot; href=&quot;#&quot;&gt;&apos;

+
(if ( [salesQuantity].[Quantity] &gt; 10000000 ) then
(&apos;&lt;font color =&quot;Red&quot;&gt;&apos;)
else (&apos;&lt;font color =&quot;Green&quot;&gt;&apos;))
+


&apos;&lt;font size=&quot;4.2em&quot;&gt;&lt;font style=&quot;Bold&quot;&gt;&amp;#x25a0;&lt;/font&gt;&lt;/font&gt;&lt;/font&gt;

&lt;span class=&quot;classic&quot;&gt;

&lt;table border=&quot;0&quot;  width=&quot;100%&quot; cellpadding=&quot;3&quot; cellspacing=&quot;3&quot; &gt;
&lt;tr&gt;&apos;
+
(if ( [salesQuantity].[Quantity] &gt; 10000000 ) then
(&apos;&lt;td style =&quot;background-color:Red&quot;&gt;&lt;font color=&quot;White&quot;&gt;&lt;font style=&quot;Bold&quot;&gt;&lt;font size=&quot;2.2em&quot;&gt;&amp;nbsp;&apos; + [salesQuantity].[Product line] + &apos;&lt;/font&gt;&lt;/font&gt;&lt;/font&gt;&lt;/td&gt;&apos;)
else (&apos;&lt;td style =&quot;background-color:Green&quot;&gt;&lt;font color=&quot;White&quot;&gt;&lt;font style=&quot;Bold&quot;&gt;&lt;font size=&quot;2.2em&quot;&gt;&amp;nbsp;&apos; + [salesQuantity].[Product line] + &apos;&lt;/font&gt;&lt;/font&gt;&lt;/font&gt;&lt;/td&gt;&apos;))

+

&apos;&lt;/tr&gt;
&lt;/table&gt;

&lt;font size=&quot;2.2em&quot;&gt;&amp;nbsp;&amp;nbsp; Quantity: &lt;/font&gt;&apos; + [salesQuantity].[strQuantity] + &apos;

&lt;br&gt;&lt;/br&gt;

&lt;/span&gt;&lt;/a&gt;&apos;</reportExpression></dataSource>
</HTMLItem></contents></tableCell></tableCells></tableRow></tableRows></table></contents></listColumnBody></listColumn></listColumns><propertyList><propertyItem refDataItem="Quantity"/><propertyItem refDataItem="strQuantity"/><propertyItem refDataItem="Revenue"/></propertyList></list></contents>
<style><CSS value="padding-bottom:10px"/></style></block></contents>
</block></contents>
<style><CSS value="text-align:center;padding-top:20px;padding-bottom:20px"/></style></block><block>
<contents><textItem><dataSource><staticValue>Report Specification</staticValue></dataSource><style><CSS value="color:#0099CC;display:block"/></style></textItem><HTMLItem>
<dataSource>
<staticValue>&lt;textarea style=&quot;width:636px;height:50px&quot; readonly=&quot;readonly&quot;&gt;




&lt;/textarea&gt;
</staticValue>
</dataSource>
</HTMLItem></contents>
<style><CSS value="padding-top:20px;text-align:center"/></style></block></contents>
</pageBody>
</page>
<page name="Reference Page">
<style>
<defaultStyles>
<defaultStyle refStyle="pg"/>
</defaultStyles>
</style>
<pageBody>
<style>
<defaultStyles>
<defaultStyle refStyle="pb"/>
</defaultStyles>
</style>
<contents><block name="Title_Block">
<contents><table><style><defaultStyles><defaultStyle refStyle="tb"/></defaultStyles><CSS value="border-collapse:collapse;width:100%"/></style><tableRows><tableRow><tableCells><tableCell><contents><textItem><dataSource><staticValue>Active Report Techniques: </staticValue></dataSource><style><CSS value="color:white;font-size:14pt;font-weight:bold"/></style></textItem></contents><style><CSS value="height:57px;width:250px;padding-left:20px"/></style></tableCell><tableCell><contents><textItem name="Technique_Name"><dataSource><staticValue>Technique Name</staticValue></dataSource><style><CSS value="color:white;font-size:14pt;font-weight:bold"/></style></textItem></contents></tableCell></tableCells></tableRow></tableRows></table></contents>
<style><CSS value="height:57px;width:1024px"/><generatedBackground><fill><linearGradient><gradientColor gradientColor="#81D2F6"/><gradientColor colorPosition="70" gradientColor="#81D2F6"/><gradientColor colorPosition="100" gradientColor="white"/></linearGradient></fill></generatedBackground></style></block><block>
<contents/>
</block></contents>
</pageBody>
</page></reportPages>
</layout>
</layouts>
<XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" output="no" value="true"/><XMLAttribute name="listSeparator" output="no" value=","/><XMLAttribute name="RS_modelModificationTime" output="no" value="2012-05-25T17:27:04.963Z"/></XMLAttributes><reportName>tooltips</reportName><queries><query name="salesQuantity">
<source>
<model/>
</source>
<selection><dataItem aggregate="none" name="Product line" rollupAggregate="none"><expression>[Sales (query)].[Products].[Product line]</expression><XMLAttributes><XMLAttribute name="RS_dataType" output="no" value="3"/><XMLAttribute name="RS_dataUsage" output="no" value="attribute"/></XMLAttributes></dataItem><dataItem aggregate="total" name="Quantity"><expression>[Sales (query)].[Sales].[Quantity]</expression><XMLAttributes><XMLAttribute name="RS_dataType" output="no" value="1"/><XMLAttribute name="RS_dataUsage" output="no" value="fact"/></XMLAttributes></dataItem><dataItem name="strQuantity"><expression>cast ([Quantity], varchar(10))</expression></dataItem><dataItem aggregate="total" name="Revenue"><expression>[Sales (query)].[Sales].[Revenue]</expression><XMLAttributes><XMLAttribute name="RS_dataType" output="no" value="2"/><XMLAttribute name="RS_dataUsage" output="no" value="fact"/></XMLAttributes></dataItem></selection>
</query></queries></report>





[bdbits]

The core problem was the limitation of the title attribute, which the sample report does not use as suggested.

It does rely on HTML items containing CSS, which in turn use :hover properties to show the tooltip. Which is a good idea.

I still think using really long tooltips is a poor user experience, regardless of technique used to display them.

[dougp]

Right.  I get requests of that nature from users all the time.  I ask them what they need and rather than describing the problem, the specify a solution.  If they already have a solution, why did they come to me?

So I try to separate the solution from the problem.

Problem:  I need to display a description in a tooltip.  The contents may be quite large.
Solution 1:  Why not use the title attribute?  Well, because it is rigid and unpredictable.  It may not meet your needs.  Stackoverflow has at least one good discussion about the maximum length of the title attribute and how it behaves as the content grows.
Solution 2:  Let's use css and a span or a div to produce the tooltip.

Telling the report developer/user that their problem statement (in this case, to display a very long description in a tooltip) is wrong (more than once) is unhelpful.  It's quite likely that they are just trying to implement what the boss demands.