Fancy Tooltips with jQuery

Information Windows are a useful feature in MicroStrategy for adding context to your dashboard.  i’ve talked about alternatives before, but today I’ll talk about extending the functionality of Info Windows using jQuery to allow them to display as a tooltip replacement instead of only on click from grids.  In it’s modified state, we can display the Info Window from any location and not just from a click coming from a grid.

The report we’ll use for this example is from the MicroStrategy Tutorial.  This dashboard shows you some stats and if you want more details about a KPI, you click it to open the dataset.

The dataset contains all of the details that fed the dashboard, but it doesn’t really add a lot of flavor.  Worse, you lose context since you’ve left your dashboard and now have to use the back button to return.

We can’t use an Info Window in this case because the way we’ve designed the dashboard isn’t using grids.  Here’s what we can do though:

First, similar to building an Info Window, we’ll create a Panel that has the information we want to show in the tooltip.  You can add anything you want, such as a graph or additional information.

Once this Panel is created, don’t check the option to make it an Information Window.  Instead, just place it where you want it to show up (in this case, next to the Revenue link).

Next, replace the Revenue hyperlink with an HTML Container that contains the following code:

<a id="RevLabel" style="color:blue">Revenue</a><script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $('#K242').hide();
  });

 $('#RevLabel').hover(function (){
if($('#K242').is(":hidden")){
   $('#K242').fadeIn("slow");
  } else
  {
     $('#K242').fadeOut("slow");
  }
});
</script>

Note: See the jQuery post about how to install jQuery locally if your web server doesn’t allow cross site scripting and reference this post for instructions on how to obtain the Panel’s ID.

What this code does is initially hide the Panel when the document loads, and then shows it with a fade in / fade out effect when you hover over the Revenue label.  You can still make the Revenue link go to the data set if that’s valuable, but we’ve now brought the important information directly to the user and preserved the context of the dashboard.

Here’s a video of it in action:

You may also like...