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...

31 Responses

  1. Aaron says:

    Nice trick. Your MSTR World presentation was by far the best session of the past 2 World’s.

    If you wanted to use information windows instead, what I’ve done is leverage the URL API. I’ve made many images and text boxes popups for navigation menus, details, etc… Fairly simple, just set the object’s hyperlink to:

    mstr://?evt=2048500&panelName=[x]

    Where ‘x’ is the name of your information window panel stack.

  2. Hello bryan,

    thanks for sharing, i have used the above jquery but its showing error on express mode,
    “ReferenceError
    $ is not defined”

    can you help me in resolving this issue.

    • Bryan says:

      That implies that the jQuery library is not loaded. One possibility is that your web server does not allow cross site scripting (loading the library from an external URL). You’d have to download the file and load it locally somewhere on the webserver and then reference it. I find it easiest to download it to your /javascript folder and then you can reference it as ../javascript/jquery.min.js

    • Daniel says:

      We’ve installed this on our server in the web aspx folder, and are able to reference it locally in Interactive, but I also get the $ is not defined when trying to run it in Express Mode.

    • Bryan says:

      To support Express Mode, make sure you also added it to the file Mojo_Section.aspx.

    • I have tried to find the Mojo_Section.aspx file. Can you post the default location.

    • Bryan says:

      It’s in the /asp folder, same place as mstrWeb.aspx.

    • Mukesh says:

      Bryan – I am able to find the Mojo_Section.aspx file but what contain I need to add in this file?

  3. Prem says:

    If multiple html containers as links point to the same panel stack, is it possible to call and display a specific panel from a panel stack? If there is jquery code already available, could you or anyone please share?

    • Bryan says:

      I’ve never tried it, but it should be possible since Panel Stacks are managed client side. I’d probably just design it as separate panel stacks, though those are an expensive object in terms of loading time, so it would be interesting to pack them all into 1 stack and toggle between.

  4. Used this code today but instead of the text link on Revenue, I added the img tag: img src=”./images/yourimagename.png” height=”32″ width=”38″ to show an information icon we have in our projects to give more info about report/dashboard items. So if you click on that the panel will show up in web.

  5. Hello Bryan,

    Cool stuffs and its works perfectly. Had a question, is it possible to display the same by passing prompt answers to the popup windows you have created?

    Many Thanks,
    Althaf

  6. Nikky says:

    Hey Bryan,

    I used this code to implement a ‘Links’ icon that will show up a bunch of links to other dashboards and files when you click on it. I just had to change the “hover” to a “click” and change the cursor to look like a pointer/hand. Works great and the fade in/out animation looks neat.

    However, I just noticed that when I export the dashboard to PDF, I see the “hidden” PanelStack as well. This happens if it is an “hover” or a “click”. Any idea on how to hide this PanelStack on a PDF export?

    Thanks!
    Nikky

    • Bryan says:

      You could try putting it behind another object, like a grid or something.

    • Nikky says:

      I did try that, but then it will always be behind the grid even when I click on the image to show the PanelStack. Anyways, I have a not-so-great workaround by pushing it to the bottom of the page and showing the links horizontally.

  7. Hi,

    Great post.
    I was wondering if there’s a way to change the way MicroStrategy tooltips look like (background color, fonts etc).

    Thanks
    Yuval

  8. borr says:

    Is there a way to get this to work in Express mode?

    • Bryan says:

      Yeah it works in Express Mode, but it’s super quirky. Basically, make sure that the HTML Container containing the code is in the header, not the footer. Also, object IDs change constantly during runtime, so you need to modify the code to use .find() instead of calling the ID specifically. For these reasons, I avoid using jQuery with Express Mode.

  9. Travis1585 says:

    Does this work in Interactive Mode? I got the window to pop up in Editable Mode, but when I click on the hyperlink, it doesn’t do anything..

  10. Bryan, I am looking for some guidance on ‘previewing the report’ on mouse over of a report link. We have a static image for each report. I am java developer and I know how to get the popup with javascript/jquery, but would like to know some insights on which MSTR files (.js/.xml) do I have to modify to add my java script and how to aplly those changes?

  11. Anmola says:

    Hi Bryan,
    I’m facing problem in editing the tooltip. the senario is, in a bubble graph I have 3 attributes and 3 metrics. I want to show the values of attributes along with their names.
    The fact is that bubble graph requires 1 attribute and 3 metrics. so after applying {&SERIESLABEL} in tooltip I am getting values of all the attributes in a single line and not having any idea how to get the names of the attributes.

    Please help me out.

  12. Rajan Babu S says:

    Hi ,
    I have a strange scenario .
    I have two metrics(m1,m2) and one attribute(a1). I am showing a graph which consists of one metric and one attribute(a1&m1).
    The requirement is to show the second metric value(m2 value) in the tool tip of graph bar.
    The constraint is I don’t want the second metric (m2) to included in graph.
    Is it possible ?.
    I came across this post but I am unable to view the video link over here.

  13. Jay says:

    Hello Bryan, is there a way to use JQuery to create a link from a chart to another document? For example I would like to click on a bar chart and have that open a new document with passed selectors.

  1. October 6, 2014

    […] “jailbreak” by injecting jQuery into dashboards which let you do some pretty cool things on the fly.  Even though they didn’t intend it, it’s still nice that the […]

Leave a Reply

Your email address will not be published. Required fields are marked *