Tooltip

by Umar

HTML

<script src="http://fonts.googleapis.com/css?family=Droid+Sans:400,700"></script>
<h1>Applied to a link</h1>
<p><a href="#" title="Here is a very nice link. It goes nowhere. Enjoy!" class="masterTooltip">Pellentesque habitant</a></p>


<h1>Applied to an entire paragraph</h1>
<p title="This is a p tag. There are many like it but this one is mine!" class="masterTooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin purus odio, elementum quis eleifend nec, accumsan et leo. Mauris tellus tellus, vehicula id pulvinar ut, egestas molestie odio. Suspendisse potenti.</p>

<h1>Applied to an image</h1>
<p><img src="http://static.tumblr.com/7a2s007/QIolqkrlc/bird_twitter.png" title="Follow Us on Twitter!" class="masterTooltip"></p>

<h1 title="One tooltipped heading, as promised!" class="masterTooltip">Applied to an entire heading tag</h1>
<p title="Mouse over the heading above to view the tooltip." class="masterTooltip">Mouse over the heading text above to view it's tooltip.</p>

<h1>Applied to an button element which also uses a jquery hover effect.</h1>
<button type="button" onClick="window.location.href='#';" id="" class="btn-tan-normal masterTooltip" title="Click this button to submit your payment. All Sales are Final!">Submit Payment</button>

CSS

body {
    font-family: 'Droid Sans', sans-serif;
}

.tooltip {
    display:none;
    position:absolute;
    font-family: 'Droid Sans', sans-serif;
    font-weight:700;
    border: 1px solid #ccc;
    background-color:#eee;
    padding:8px;
    color:#444;
    font-size:12px;
}

h1 {
    font-weight:700;
    color:#444;
    font-size:20px;
}

h1, p {
    margin-bottom:18px;
}

.btn-tan-normal {
    display: inline-block;
  margin: 0px 0px 12px 0px;
  padding: 0.4em 8px;
  font-family: 'Droid Sans', Arial, Verdana, sans-serif !important;
  font-size: 14px;
  line-leight: 14px;
  font-weight:bold !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  color: #4C4C4C;
  background:#DBD3CA;
  background: -moz-linear-gradient( top, #E6DDD3 0%, #C4BDB5);
  background: -webkit-gradient(linear, left top, left bottom, from(#E6DDD3), to(#C4BDB5));
  border: 1px solid #DED6CC;
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4),inset 0px 0px 2px rgba(255,255,255,0.9);
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4),inset 0px 0px 2px rgba(255,255,255,0.9);
  text-shadow: 0px 1px 0px rgba(255,255,255,0.3);
}

.btn-tan-hover {
  display: inline-block;
  margin: 0px 0px 12px 0px;
  padding: 0.4em 8px;
  font-family: 'Droid Sans', Arial, Verdana, sans-serif !important;
  font-size: 14px;
  line-leight: 14px;
  font-weight:bold !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  color: #444;
  background:#DED6CC;
  background: -moz-linear-gradient( top, #F2E9DF 0%, #C4BDB5);
  background: -webkit-gradient(linear, left top, left bottom, from(#F2E9DF), to(#C4BDB5));
  border: 1px solid #DED6CC;
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.8),inset 0px 0px 2px rgba(255,255,255,0.9);
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.8),inset 0px 0px 2px...

JavaScript

$(document).ready(function() {
    // Tooltip only Text
    $('.masterTooltip').hover(function(){
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('500');
    }, function() {
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        var mousex = e.pageX + 20;
        var mousey = e.pageY + 20;
        $('.tooltip')
        .css({ top: mousey, left: mousex })
    });
});


$(document).ready(function(){
$(".btn-tan-normal").hover(
  function () {
    $(this).attr("class","btn-tan-hover");
  },
  function () {
    $(this).attr("class","btn-tan-normal");
  }
);
});