Dynamic Tooltips on multiple lines

[okh310]

Hello -

I am trying to insert a dynamic tooltip into a simple list report.  When the user hovers over a data item,  I want to show multiple lines inside of one tooltip.  So it should look something like this on the mouseover:

Attribute 1:  <data item 1>
Attribute 2:  <data item 2>
Attribute 3:  <data item 3>

I cannot seem to find the code to do this.  I can easily display one line with dynamic test using the following code:
'<span title="' +'Task Type: '+ [Task Type] + '">'

I've tried all different types of variations with
 to insert a break.  But it's not working as expected.  I may have the wrong syntax. 

a) is this possible to do with multiple dynamic data items and b) anyone know what the HTML code would be?

Thank you!

[New_Guy]

Hi,
I am not an HTML expert, but one way to show multiple data items in one line is to concatinate the data Items in the HTML items using report expression.

'<span title="' +'Task Type: '+ [Task Type] + ' Task By: ' + [Task By]  +'">'

Good luck
New guy

[bdbits]

Off the top of my head, I would try something like:

'<p>Attribute 1: '+ [data item 1] + '</p><p>Attribute 2: '+ [data item 2] + '</p><p>Attribute 3: '+ [data item 3] + '</p>'

[AnalyticsWithJay]

Here's a post I wrote on creating visually appealing tooltips in Cognos:

http://www.cognoswithjay.com/creating-visually-appealing-tooltips-cognos/

You can style the text however you want using this technique, as you're not limited to the not-so-appealing default HTML title.

[CognosPaul]

This technique is great.


I'm having trouble posting comments on your blog, so I'm replying here. To show off the effects, I like to use GifCam. All of the animations on my own blog were created using it.

[okh310]

Thanks guys!  Some nifty stuff  8)

[AnalyticsWithJay]

This technique is great.


I'm having trouble posting comments on your blog, so I'm replying here. To show off the effects, I like to use GifCam. All of the animations on my own blog were created using it.

Thanks for the tip Paul! I'll have to bookmark that, and also look into the bugs on my blog  :-[

[hespora]

http://www.cognoswithjay.com/creating-visually-appealing-tooltips-cognos/

Quoting the late Douglas Adams here, "a common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools." ;)

I fail to follow your technique somewhere in between the fourth and fifth step. Assigning the class "tooltip" to the text item that I want to provide a definition for works fine, and when running, I can see the changes in that the text item is now dotted-underlined, and the mouse cursor changes to the question mark cursor. Great.
To what do I apply the class "tooltiptext", though? Any text item I put somewhere on the page? Because that isn't working out for me.

[BigChris]

I'm sure it's my lack of experience with HTML etc. but I can't seem to make this work. I've copied the code and pasted it into an HTML item, which I put at the top of the report page. That didn't seem to do anything so I moved it to below the header on the report, but still nothing. Could there be anything that's been turned off that would stop it working? And does it need a particular version to work (I'm on 10.2.0)?

I can see this being really useful. Apologies if I'm asking really stupid/obvious questions...

[AnalyticsWithJay]

Quoting the late Douglas Adams here, "a common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools." ;)

I fail to follow your technique somewhere in between the fourth and fifth step. Assigning the class "tooltip" to the text item that I want to provide a definition for works fine, and when running, I can see the changes in that the text item is now dotted-underlined, and the mouse cursor changes to the question mark cursor. Great.
To what do I apply the class "tooltiptext", though? Any text item I put somewhere on the page? Because that isn't working out for me.

Thanks for pointing out a mistake I made in the article :) I've now updated it to be hopefully a little more clear. Updates:
1. Both text items -- the Term and the Term Definition, need to be placed inside a block.
2. The block has the class "tooltip"
3. The term definition (ie: the text that will display inside the tooltip) will have the class "tooltiptext"

Interestingly, I didn't know my code only worked in an Active Report. I'll look into what's happening and update it shortly to work in all reports.

I'm glad folks have found this technique helpful. I'm teaching a course on dashboard design techniques in the next couple of weeks, showing how we can produce "nicer than tableau" (:P) dashboards. I'll be sure to share some of those on the blog.

[AnalyticsWithJay]

I'm sure it's my lack of experience with HTML etc. but I can't seem to make this work. I've copied the code and pasted it into an HTML item, which I put at the top of the report page. That didn't seem to do anything so I moved it to below the header on the report, but still nothing. Could there be anything that's been turned off that would stop it working? And does it need a particular version to work (I'm on 10.2.0)?

I can see this being really useful. Apologies if I'm asking really stupid/obvious questions...

Sorry Chris, my fault.

1. I didn't realize this is only working in Active reports so far. I'm working on fixing it for standard reports.
     EDIT: Seems to be an IE-related issue in standard reports as Firefox works. Working on it...

2. Thanks to Hespora, I noticed I had an error in my article.

See the attached report specifications in Cognos 10.2.2. Let me know if this works for you.

[CognosPaul]

I'm going to write up and publish this one of these days. Hopefully before the sun expands. Maybe. In the meantime you can all have a sneak peak. I ripped off and modified the tooltip code from http://lawrence.ecorp.net/inet/samples/dhtml-rollover-tooltip-img-js.shtml.

There is quite a bit of functionality in here. It will automatically detect if the object is a graph or a table. If it's a table, you can put in a custom tooltip, or put an HTML item to disable tooltips.

Make sure you put in a render variable so this doesn't render for PDF or spreadsheetML.

I've tested this in Chrome, Firefox, and at least one flavor of IE.

Let me know if you have any questions.

EDIT: added another use case example.

[AnalyticsWithJay]

Nicely done, Paul. Looking forward to seeing what the community contributes in Analytics with the inclusion of jQuery, Toastr, etc.

[CognosPaul]

I've done some JS with Cognos Analytics. It is significantly easier.

Also, the best addition is that we can now pass data directly to the function instead of embedding it in the HTML.

I've written a couple of articles on JS in Analytics: http://www.pmsquare.com/main/blog/cognos-analytics-custom-javascript-date-prompts-datasets/

The next one, which should be posted soon, shows popups when you select an invalid date.

[CognosPaul]

Also, I think I'm going to be doing a workshop on this in Chicago in August. So if you're in the area you should come!

[hespora]

Updates:
1. Both text items -- the Term and the Term Definition, need to be placed inside a block.
2. The block has the class "tooltip"
3. The term definition (ie: the text that will display inside the tooltip) will have the class "tooltiptext"

Interestingly, I didn't know my code only worked in an Active Report. I'll look into what's happening and update it shortly to work in all reports.

Ok, with these infos, I got it to work. And really, it does look sleek, so: well done! :)
Nesting the desc inside the block also answered the question I had when originally reading this: what do I do if I want multiple instances of those tooltips on the same page; but the nesting takes care of that, I figure.

The only thing I would now critique is: if the block is near the edge of the page, the tooltip might be rendered off the page; see screenshot.

[JuanGonzalezT]

Here's a post I wrote on creating visually appealing tooltips in Cognos:

http://www.cognoswithjay.com/creating-visually-appealing-tooltips-cognos/

You can style the text however you want using this technique, as you're not limited to the not-so-appealing default HTML title.

Just pointing out that the blog url is now https://www.analyticswithjay.com/creating-visually-appealing-tooltips-in-cognos/