Hello there!
Today I’m going to talk about a cool features that works on Web using Interactive mode: Css tooltip on links!
To do that you have to:
1. Create a screenshot of your dashboard/report and make the image small as possible.
Tips to take a screenshot:
If you use Windows, you can use snippingtool: Open start menu -> Execute -> type: snippingtool
If you use Mac OS, you can use Grab: Command + space -> type: grab
2. Save this image inside images folder of your Microstrategy Web and name it as imagetooltip.png, for example:
For ISS the default folder is: C:\Program Files (x86)\MicroStrategy\Web Aspx\images
For J2EE the default folder is: webapps(of your java container)\MicroStrategy\images
3. Create a new Document in Web;
4. Create an HTML Container:
Click Insert -> Html Container

5. Paste this code below in your HTML Container (just double click on the HTML Container to edit it):
<style type="text/css">
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute; color:#111;
border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
a.tooltip span
{
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}
</style>
<a href="#" class="tooltip">
Dashboard A
<span>
<img src="./images/imagetooltip.png" class="callout" />
</span>
</a>
6. Execute your Document using Interactive Mode, mouse hover the link and you will see something like this:

If you want to change the name of the link, just change the “Dashboard A” to another text in:
<a href="#" class="tooltip">
Dashboard A
<span>
<img class="callout" src="./images/imagetooltip.png" />
</span>
</a>
You can:
A. Customize the CSS;
B. Use an Image to substitute the text link;
C. Insert more links. To do that just replicate this extract of code below and change the Dashboard Name and the src=”” of the img tag with another image URL:
<br />
<a href="#" class="tooltip">
Dashboard Name
<span>
<img class="callout" src="./images/imagetooltip.png" />
</span>
</a>
That’s it!
If you need help with the customization or how to create more links, just post a comment below.
Hope it helps!
God bless you!
Like this:
Like Loading...