Creating a Preview of your Links Using HTML Container

Hello there!

Today I’m going to talk about a cool features that works on Web using Interactive modeCss 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 Windowsyou 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

pic2

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:

pic3

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s