Nice looking tooltips without JavaScript!

One of the things I’m known for is super complicated JavaScript solutions for the most mundane tasks. But I have heard some complaints by people who want to keep things a little simpler and easier to maintain. So while I have written about custom tooltips before, let’s focus on one that requires no JavaScript at all. This is a pure CSS solution that I shamelessly stole from here: https://codepen.io/chocochip/pen/zYxMgRG

The trick here is it’s all CSS, so in order for it to work we do need to add an HTML item to hold the STYLE node.

<style>
div[lid*=wrapper] {
  position: relative;
  display: inline-block;
}
div[lid*=content]{
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -10px;
  transform: translate(0, 10px);
  background-color: #bfbfbf;
  padding: 1.5rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  width: auto;
}
div[lid*=wrapper]:hover div[lid*=content] {
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transform: translate(0, -20px);
  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

div[lid*=wrapper]:hover div[lid*=content] * {
  user-select: text !important; 
  -moz-user-select: text !important;    
  -webkit-user-select: text !important;
  -ms-user-select: text !important;
}


</style>

There are a few interesting things to note here. I’m using the css selector lid*=wrapper, this will match any blocks with the name starting with “wrapper”, so multiple blocks named wrapper, wrapper1, wrapperbig, will all be affected by the style. The last bit is to allow the contents of the popover to be highlighted and copied.

“But how can you use this”, I hear you ask. It’s actually quite easy. First a caveat, this doesn’t work with points on a graph. I’m looking for a solution for graphs, but we might have to rely on JS instead of CSS only solution. The way this specific solution works is to have the structure look like this:

wrapperBlock (in yellow)
Item (this is what the user sees and hovers over. In this case I’m using a text item)
contentBlock (in teal)
This is what appears in the popup tooltip. (I’m pretty sure this can be almost anything except a c11 graph)

Let’s take a look at it in action:

A couple things to note, the tooltip doesn’t instantly appear when you move your cursor over the items, only when you pause on one. We can also see that the user-select does work, and we can now select the text in the popover.

Take a look at the attached report below:
csstooltipreport.txt (714 downloads)

Layout Component References

Zephyr, author of the blog Cognos and Me, wrote an excellent (but brief) article on what Layout Components are, and why you’d want to use them. I’m going to expand briefly on what he wrote, and give an example of my own.

In his example, he created a generic header that authors would use in their reports. This allows the author of the components report to control the header in all of the reports referencing it. Very useful for maintaining a corporate look and feel.

There is another use. While the Cognos authors that I work with excel in SQL and MDX, many of them are lacking knowledge in JavaScript. One of the most common requests for help that I receive is to code a simple container that allows users to switch between viewing a table or a graph.

In order to accomplish this, you would need to use JavaScript. So, instead of having to help each author individually, I find it easier to create a single component library report. To create the component library, simply create a new report. Since this is post is about components, and not about JavaScript I’ll give you the XML of an example components library.

<report xmlns="http://developer.cognos.com/schemas/report/3.0/" expressionLocale="en-us"><!--RS:8.2-->
	<modelPath>/content/package[@name='GO Sales']/model[@name='model']</modelPath>
	<layouts>
		<layout>
			<reportPages>
				<page class="pg" name="Page1">
					<pageBody class="pb">
						<contents><table class="tb" name="Switch Container"><tableRows><tableRow><tableCells><tableCell><contents><textItem name="SW - Object Name"><dataSource><staticValue>Object Name</staticValue></dataSource></textItem></contents><style><CSS value="padding-left:3px;padding-top:2px;padding-bottom:2px;font-weight:bold;background-color:#FAFAFA;border-top:1pt solid silver;border-bottom:1pt solid silver;border-left:1pt solid silver"/></style></tableCell><tableCell><contents><HTMLItem description="span">
														<dataSource>
															<staticValue>&lt;span onclick="
table = this.parentNode.parentNode.parentNode;
divArr = table.getElementsByTagName('Div');
for (var i = 0; i &lt; divArr.length; i++) {
  if (divArr[i].getAttribute('id') != null &amp;&amp; divArr[i].getAttribute('id') == 'First' ) {divArr[i].style.display = 'block';}
  if (divArr[i].getAttribute('id') != null &amp;&amp; divArr[i].getAttribute('id') == 'Second' ) {divArr[i].style.display = 'none';}
}
this.style.fontWeight='bold';
this.nextSibling.nextSibling.style.fontWeight='normal';"
style="font-weight:bold"
&gt;</staticValue>
														</dataSource>
													</HTMLItem>
													<textItem name="SW - First Label"><dataSource><staticValue>Graph</staticValue></dataSource></textItem><HTMLItem description="span">
														<dataSource>
															<staticValue>&lt;/span&gt; | &lt;span onClick="
table = this.parentNode.parentNode.parentNode;
divArr = table.getElementsByTagName('Div');
for (var i = 0; i &lt; divArr.length; i++) {
  if (divArr[i].getAttribute('id') != null &amp;&amp; divArr[i].getAttribute('id') == 'First' ) {divArr[i].style.display = 'none';}
  if (divArr[i].getAttribute('id') != null &amp;&amp; divArr[i].getAttribute('id') == 'Second' ) {divArr[i].style.display = 'block';}
}
this.style.fontWeight='bold';
this.previousSibling.previousSibling.style.fontWeight='normal';"
style="font-weight:normal"
&gt;</staticValue>
														</dataSource>
													</HTMLItem>
													<textItem name="SW - Second Label"><dataSource><staticValue>Table</staticValue></dataSource></textItem><HTMLItem description="/span">
														<dataSource>
															<staticValue>&lt;/span&gt;</staticValue>
														</dataSource>
													</HTMLItem>
												</contents><style><CSS value="text-align:right;padding-right:3px;padding-top:2px;padding-bottom:2px;background-color:#FAFAFA;border-top:1pt solid silver;border-bottom:1pt solid silver;border-right:1pt solid silver"/></style></tableCell></tableCells></tableRow><tableRow><tableCells><tableCell colSpan="2"><contents><block>
														<contents><HTMLItem description="div First">
														<dataSource>
															<staticValue>&lt;div id="First" &gt;</staticValue>
														</dataSource>
													</HTMLItem><textItem name="SW - First"><dataSource><staticValue>First</staticValue></dataSource></textItem><HTMLItem description="div Second">
														<dataSource>
															<staticValue>&lt;/div&gt;&lt;div id="Second" style="display:none"&gt;</staticValue>
														</dataSource>
													</HTMLItem><textItem name="SW - Second"><dataSource><staticValue>Second</staticValue></dataSource></textItem><HTMLItem description="/div">
														<dataSource>
															<staticValue>&lt;/div&gt;
</staticValue>
														</dataSource>
													</HTMLItem></contents>
														<style><CSS value="width:350px;height:350px;overflow:auto;text-align:center"/></style></block>

												</contents><style><CSS value="text-align:center;background-color:#FAFAFA;vertical-align:middle;border-bottom-style:none;border-top:1pt solid silver;border-left:1pt solid silver;border-right:1pt solid silver"/></style></tableCell></tableCells></tableRow><tableRow><tableCells><tableCell><contents><textItem name="SW - More Data Left"><dataSource><staticValue>More Data Left</staticValue></dataSource></textItem></contents><style><CSS value="padding-left:3px;background-color:#FAFAFA;border-bottom:1pt solid silver;border-left:1pt solid silver"/></style></tableCell><tableCell><contents><textItem name="SW - More Data Right"><dataSource><staticValue>More Data Right</staticValue></dataSource></textItem></contents><style><CSS value="text-align:right;padding-right:3px;background-color:#FAFAFA;border-bottom:1pt solid silver;border-right:1pt solid silver"/></style></tableCell></tableCells></tableRow></tableRows><style><CSS value="border-collapse:collapse"/></style></table></contents>
					</pageBody>
				</page>
			</reportPages>
		</layout>
	</layouts>
</report>

It was written in 8.2, but it upgrades perfectly. As the report has no queries, you can simply point it to any package you have. When the report loads, you should see the following:

It’s important to note the names. The table is named Switch Container. This is what the report author will select when he uses it from the Layout Component. Each text item is also named. The author will be able to use the component override to replace those items as needed. If the author doesn’t need links for more data below the graph/table, he simply overrides the two bottom items without replacing them. The author can also use the same component multiple times in the same report. When writing JavaScript functions, you should take this possibility into account.

The library needs to be saved in a location that both the author and users can traverse and execute. Any report will fail if the user cannot access the original components library. The components library also needs to exist in the same location in the production environment.

There are many other possible uses for layout component. Any time you need complex functionality in multiple reports components should be considered.