Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Untitled Document</title>
- <script type="text/javascript" src="http://www.senichi.nl/magento/js/jquery/jquery-1.4.4.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- //Select all anchor tag with rel set to tooltip
- $('a[rel=tooltip]').mouseover(function(e) {
- //Grab the title attribute's value and assign it to a variable
- var tip = $(this).attr('title');
- //Remove the title attribute's to avoid the native tooltip from the browser
- $(this).attr('title','');
- //Append the tooltip template and its value
- $("html").append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');
- //Set the X and Y axis of the tooltip
- $('#tooltip').css('top', e.pageY + 10 );
- $('#tooltip').css('left', e.pageX + 20 );
- //Show the tooltip with faceIn effect
- $('#tooltip').fadeIn('500');
- $('#tooltip').fadeTo('10',0.8);
- }).mousemove(function(e) {
- //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
- $('#tooltip').css('top', e.pageY + 10 );
- $('#tooltip').css('left', e.pageX + 20 );
- }).mouseout(function() {
- //Put back the title attribute's value
- $(this).attr('title',$('.tipBody').html());
- //Remove the appended tooltip template
- $("html").children('div#tooltip').remove();
- });
- });
- </script>
- <style>
- #test {
- display:block;
- width:300px;
- height:300px;
- font-family:Arial, Helvetica, sans-serif;
- font-size:18px;
- background-color:#069;
- margin-left:300px;
- text-decoration:none;
- }
- #tooltip {
- position:absolute;
- z-index:9999;
- color:#fff;
- font-size:10px;
- width:180px;
- }
- #tooltip .tipHeader {
- display:none;
- }
- /* IE hack */
- *html #tooltip .tipHeader {margin-bottom:-6px;}
- #tooltip .tipBody {
- background:url(bg_tooltip.png); background-repeat:no-repeat;
- padding:5px;
- width:166px;
- height:37px;
- }
- #tooltip .tipFooter {
- display:none;
- }
- </style>
- </head>
- <body>
- <a rel="tooltip" Id="test" href="http://www.google.nl" title="Shop the end of season sale"></a>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement