Last Updated:

Creative Style Tips - for your website

Hints are an integral part of the site, which contains a lot of text information, so in this lesson we will talk about creating hints using the TyniTips plugin, the essence is when, when you hover the mouse cursor over the selected word or object, a hint smoothly pops up with the necessary text, image or other media file to provide additional information to the visitor, the plug-in is quite easy to use and will not be difficult to implement in layout of the site, and so, let's see what we got out of it..
 

First, we need to connect jQuery and the plugin itself, for this we need to insert the following code between the head tags:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinyTips.js"></script>

Next, we form directly the hints for the necessary elements:

<script type="text/javascript">
$(document).ready(function() {
$('a.tTip').tinyTips('light', 'title');
$('a.imgTip').tinyTips('yellow', '<img src="images/demo-image.jpg" /><br />p-qc.com - An informational blog that publishes web news design, as well as information and tips on creating websites, templates, and much more interesting from the Internet world.');
$('img.tTip').tinyTips('green', 'title');
$('h1.tagline').tinyTips('blue', 'tinyTips - Tooltip Tutorial!');
});
</script>

Calling the plug-in is accompanied by passing it two arguments. The first argument indicates the display style of the tooltip. The second argument points to the source of the tooltip content.

Then we set styles for our tooltips, the style for the tooltip has three sections. The general section sets the style for the entire tooltip as a whole. In the section at the bottom (the .bottom class), you can set a pointer image to the element for which the tooltip is displayed looks like this:

.lightTip { width: 342px; }
.lightTip .content { width: 310px; padding: 10px; border: 6px solid #e2e2e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #ffffff; color: #020202; }
.lightTip .bottom { height: 14px; background: url(../images/notch-white.png) top center no-repeat; }


.yellowTip { width: 342px; }
.yellowTip .content { width: 310px; padding: 10px; border: 6px solid #f9e98e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbf7aa; color: #020202; }
.yellowTip .bottom { height: 14px; background: url(../images/notch-yellow.png) top center no-repeat; }


.orangeTip { width: 342px; }
.orangeTip .content { width: 310px; padding: 10px; border: 6px solid #f9cd8e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbe3aa; color: #020202; }
.orangeTip .bottom { height: 14px; background: url(../images/notch-orange.png) top center no-repeat; }


.redTip { width: 342px; }
.redTip .content { width: 310px; padding: 10px; border: 6px solid #ce6f6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #f79992; color: #020202; }
.redTip .bottom { height: 14px; background: url(../images/notch-red.png) top center no-repeat; }


.greenTip { width: 342px; }
.greenTip .content { width: 310px; padding: 10px; border: 6px solid #a9db66; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #cae8a2; color: #020202; }
.greenTip .bottom { height: 14px; background: url(../images/notch-green.png) top center no-repeat; }


.blueTip { width: 342px; }
.blueTip .content { width: 310px; padding: 10px; border: 6px solid #36a4d9; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #90d8f0; color: #020202; }
.blueTip .bottom { height: 14px; background: url(../images/notch-blue.png) top center no-repeat; }


.purpleTip { width: 342px; }
.purpleTip .content { width: 310px; padding: 10px; border: 6px solid #8671de; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #a290f0; color: #020202; }
.purpleTip .bottom { height: 14px; background: url(../images/notch-purple.png) top center no-repeat; }


.darkTip { width: 342px; }
.darkTip .content { width: 310px; padding: 10px; border: 6px solid #303030; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #505050; color: #f8f8f8; }
.darkTip .bottom { height: 14px; background: url(../images/notch-dark.png) top center no-repeat; }

At this point, our tips are ready, you can see how they look in the demo or download the finished material.