Sunday, October 16, 2011

Nice Tips

CSS and Javascript Hint Box

Nice Tips are an easy and cool way to show visitors to your webpage additional information or special reference,  which is often displayed with a mouseover or click action, I wanted to create a very lightweight but attractive tooltip for a recent project. This is what I came up with. To see it in action, hold the mouse over the question mark in the line below.

Nice Tips [?]
This is the an example of a Nice Tip
displayed on two lines.


The code is very simple. Here is the HTML part of the tooltip.

<p>Nice Tips <span id="a1" class="tooltipa">[?]</span></p>
<div id="a1t" class="tooltipb">This is the an example of a Nice Tip<br />
displayed on two lines.</div>

Just enclose the trigger (in this case a question mark) in a span with a unique ID and set the class to "tooltipa". I prefer to use a number sequence like a1, a2, a3, etc. Next, enclose the tip in a DIV and append a "t" to the ID used for the trigger. In this case, the ID for the DIV is "a1t". Set this class to "tooltipb".

Define the two classes in a CSS script as follows:

.tooltipa {
  font-size:9pt;
  padding-left:3px;
  vertical-align:middle;
  color:#666666;
  cursor:pointer;
}

div.tooltipb{
  /* do not change next 4 values */
  position: absolute;
  z-index: 1000;
  left: -1000px;
  top: -1000px;
  /* change values below as desired */
  background: #565656;
  color: white;
  width: 250px; /* width of tooltip*/
  border:1px solid #fff;
  padding:8px 10px;
  font-size:10pt;
  display:none;
  text-align:center;
  /* outline radius for mozilla/firefox only */
  -moz-box-shadow:0 0 10px #000;
  -webkit-box-shadow:0 0 10px #000;
  /* create rounded corners - remove code below for square corners */
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

And finally, a little bit of jquery to activate the tip when the mouse moves over the question mark. I used jquery here, but the same result can be achieved with plain javascript.

<script type="text/javascript">
<!--
$(function() {
  $(".tooltipa").mouseover(function(){
    var thisId = $(this).attr("id");
    var pos = jQuery("#" + thisId).offset();
    var width = jQuery("#" + thisId).width();
    $("#" + thisId + "t").css( { "left": (pos.left + width + 18
) + "px", "top": pos.top + "px" } );
    $("#" + thisId + "t").css("display", "block");
    return false;
  });

  $(".tooltipa").mouseout(function(){
    var thisId = $(this).attr("id");
    $("#" + thisId + "t").css( { "left": "-1000px", "top": "-1000px" } );
    $("#" + thisId + "t").hide();
    return false;
  });
});
// -->
</script>

Quick, easy and it looks great. Hope you liked it.

delicious digg facebook stumble twitter myspace linkedin technorati reddit google springpad blogger | addthis Share More...

speak your mind

If you have something to say, we would love to hear from you.

Name:
Comments:
 
Speak
Disabled due to spam

 

categories

scripts

all
general
inbox marketing
web solutions
software
travel


Popular

newsletter

Get occasional email updates from kidmoses

donate

Donations of any size to this website are greatly appreciated.

Donate
copyright © 2004 to the present day | web design by KidMoses
privacy | terms
windsor home inspections