Table of Contents

1. Quick setup
2. global parameters
3. CSS Styling - Skins
4. Some Tips and Tricks

---

A. Quick Setup - Top

The following is a quick guide designed to show you the basic steps required to insert QR ToolTips into wordpress pages.

1. In the "Settings" tab, select the skin for your QR ToolTip
2. For a Qr ToolTip There are six Colors.
3. Use the Buttons Bar to Set Skin of Your Tooltip as told in step one.

4. Using the slider set the Size(in px) of Your Qr Code.
5. Set the desired Timeout of your Tooltip(its in milliseconds).
6. The third option Randomizr can be used to add the tooltips randomly any skin. All the tooltips will have any color with every reload.
7. Note: if you use Randomizr then it'll disable your default skin selection. Basically, Randomizr overrides your default selection with any random selection of color(only those available.)

B. Global Parameters - Top

Parameter	Accepted values
Skin	Choose the Tooltip skin (can be overriden)
Size	Set default Tooltip size (can be overriden)
Timeout	Set default Tooltip Timeout (can be overriden)
Randomize	Default No. Use to randomly apply colors to your tooltips making your page full of colorful Qr tooltips.

---

C. Basic Styling - Top

Basic styling of elements skin can be accomplished in a very simple way by adding a bunch of rules to your wordpress theme css. QrTipsy comes with 6 skins so you'll need to add skin name to rules in order to customize styles for a give skin. All rules will be then prefixed with the

.colorTip .SKIN_NAME

selector, in the following example we'll assume changes are applied to default skin i.e "black" skin but you can replace ".black" with ".red" / ".green" / ".blue" / ".white" / ".yellow" to override other skins settings.

For example, to change tooltips frame border, you'll just need to add

/* set border size to 8px */
.colorTip .black  {
	/* customize rounded border (not supported in ie < 9) */
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px; 
	border-radius: 8px;
}

The border area can use a solid color.

.colorTip .black {
	background-color:#E0DEDF; /* This is necessary as this forms the actual border of the tooltip*/
	border-color:1px solid #E0DEDF;
}

The tip Pointing Towards the link should have the same color. To do that for the same skin, you'll just add

/* Since we're working on the tip of the tooltip so the prefix will also change */
.pointyTip .black {
	border-top-color:#E0DEDF;
}
.pointyTipShadow .black {
	border-top-color:#E0DEDF;
}

The only thing you have to pay attention is to have these rules after component skin has been loaded, if that's not possible, you can use "!important" to make sure your customizations override default values.

---

D Some Tips and Tricks - Top

Tip 1.

If Your Theme allows you to add javascript files to your theme then you can modify default implementation of QR tooltips to links with id = "qrtipsy" to some other links with id="myid"

So Lets see How to do this to a link with id="myid", to apply default qr settings just do the following

<script type="text/javascript">
	jQuery(document).ready(function() {
		$('a#myid').qr({ color: 'black', size: 80, timeout: 500});
	});
</script>

Again, over here as well the only thing you need to do id load this file in footer, so that the default settings are overriden.

Tip 2.

If you have your default skin setting saved to red, but you want a specific link with id="qrtipsy" to have some other skin for example black, then you can do this

<a href="http://www.example.com/" class="black" id="qrtipsy">QR Tipsy</a>

You just need to add class="SKIN_NAME" where SKIN_NAME can be other than default skin.

Thank You! - Top

Once again, thank you so much for downloading and using this plugin. If the above help documentation has not answered your questions, the following are your options:

1. Go to QrTipsy Home, and read through the questions left there by others. In general other users tend to have similar questions, and if this is the case, then your questions is likely to have already been answered there.
2. If an answer to your question cannot be found, feel free to leave a comment of your own. Be sure to describe your problem in as much detail as possible and we will get back to you as soon as we can.

regards, Agnel Waghela

Go To Table of Contents

---