Making Tooltip look like the Google Maps balloon

[Bob]

I'm trying to use the Tooltip tool to create a mouseover that looks like the balloon that shows up on Google Maps (rounded edges, longer tail, etc).  Is there any way to do this?

[Martin]

Hi Bob,

You can set RadToolTip to mimic Google's info baloon by creating a new skin, where you should set larger rounded corners, tail, colors, etc.

To set an external skin to RadToolTip:

1. Set EnableEmbeddedSkins="false" in the server declaration of RadToolTip;
2. Copy one of the existing skins from [RadControlsRoot]/Skins/SkinName/ToolTip.SkinName.css and the [RadControlsRoot]/Skins/SkinName/ToolTip/ folder that contains the images of the skin in your project;
3. Register the .css fle in the head of your section using the <link> tag, and make sure you have specified the correct filepath;
4. Set Skin="SkinName" in the server declaration of RadToolTip;
5. Reload the page to see if the skin has been applied;
5. Modify the skin the way you need;

All the best,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.