Advertisement
Guest User

Untitled

a guest
Mar 2nd, 2013
153
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Simple JQuery Tooltips turtorial</title>
  5.  
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  7. <script type="text/javascript">
  8.  
  9. var options = {
  10.     hideCursor: false,
  11.     offsetX: 0.5,
  12.     offsetY: 15,
  13.     fadeInAnimationDuration: 'fast',
  14.     opacity: 0.8,
  15.     opacityAnimationDuration: 100,
  16.     maxWidth: 180,
  17.     tailSize: 5
  18. };
  19.  
  20. $(document).ready(function() {
  21.     var tooltipClass = 'default';
  22.     //Select all anchor tag with rel set to tooltip
  23.     $('a[title]:not([title=""])').mouseover(function(e) {
  24.          
  25.         //Grab the title attribute's value and assign it to a variable
  26.        var tip = $(this).attr('title');    
  27.        
  28.        //Remove the title attribute's to avoid the native tooltip from the browser
  29.         $(this).attr('title','');
  30.          
  31.         tooltipClass = getTooltipClass($(this));
  32.         //Append the tooltip template and its value
  33.         $(this).append('<div id="tooltip"><div id="tail" /><div class="' + tooltipClass + '">' + tip + '</div></div>');    
  34.          console.log('<div id="tooltip"><div id="tail" /><div class="' + tooltipClass + '">' + tip + '</div></div>');
  35.          if ($('#tooltip').width() > options['maxWidth']) {
  36.             $('#tooltip').width(options['maxWidth'] + 'px');
  37.          }
  38.  
  39.          $('#tail').css('border-width', options['tailSize'] + 'px');
  40.          $('#tail').css('top', -options['tailSize'] * 2 + 'px');
  41.         //Set the X and Y axis of the tooltip
  42.         setTooltipPosition(e);
  43.          
  44.         //Show the tooltip with faceIn effect
  45.         $('#tooltip').fadeIn(options['fadeInAnimationDuration']);
  46.         $('#tooltip').fadeTo(options['opacityAnimationDuration'], options['opacity']);
  47.          if (options['hideCursor']) {
  48.             $(this).css({cursor: 'none'});
  49.         }
  50.     }).mousemove(function(e) {
  51.         //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
  52.         setTooltipPosition(e);
  53.        
  54.     }).mouseout(function(e) {
  55.         //Put back the title attribute's value
  56.        $(this).attr('title',$('.' + tooltipClass).html());
  57.    
  58.        //Remove the appended tooltip template
  59.        $(this).children('div#tooltip').remove();
  60.        $(this).css({cursor: 'default'});
  61.        
  62.         if (options['hideCursor']) {
  63.             $(this).css({cursor: 'default'});
  64.         }
  65.    });
  66. });
  67.  
  68. function setTooltipPosition(e) {
  69.        $('#tooltip').css('top', e.pageY + options['offsetY']);
  70.         var offsetX = $('#tooltip').outerWidth() * options['offsetX'];
  71.        $('#tooltip').css('left', e.pageX - offsetX);
  72.         $('#tail').css('left', offsetX - $('#tail').outerWidth()/2);
  73. }
  74.  
  75. function getTooltipClass(e) {
  76.     //aside
  77.     if ($('aside').find(e).length > 0) {
  78.         return 'typA';
  79.     } else if ($('section.content').find(e).length > 0) {
  80.         return 'typB';
  81.     }
  82.     return 'default';
  83. }
  84. </script>
  85.  
  86. <style>
  87. body {font-family:arial;font-size:12px;text-align:center;}
  88. div#paragraph {width:300px;margin:0 auto;text-align:left}
  89. a {color:#aaa;text-decoration:none;cursor:pointer;cursor:hand}
  90. a:hover {color:#000;text-decoration:none;}
  91.  
  92. /* Tooltip */
  93.  
  94. #tooltip {
  95.    position:absolute;
  96.    z-index:9999;
  97.    color:#fff;
  98.     font-size:10px;
  99.     display: none;
  100. }
  101.  
  102. #tail {
  103.     position:absolute;
  104.    width: 0px;
  105.    height: 0px;
  106.    border: 10px solid;
  107.    border-color: transparent transparent #000 transparent;
  108.     left: 45%;
  109.     top: -20px;
  110. }
  111.  
  112. #tooltip .default {
  113.    background-color:#000;
  114.    padding:5px;
  115. }
  116.  
  117. #tooltip .typA {
  118.     background-color: red;
  119.     padding: 5px;
  120. }
  121.  
  122. #tooltip .typB {
  123.     background-color: yellow;
  124.     padding: 5px;
  125. }
  126.  
  127. </style>
  128.  
  129. </head>
  130.  
  131. <body>
  132. <aside>
  133.     <a title="AAAA">a</a>
  134. </aside>
  135. <section class="content">
  136.     <a title="AAAA">b</a>
  137. </section>
  138.  
  139. <div id="paragraph">
  140. A paragraph typically consists of a unifying main point, thought, or idea accompanied by supporting details. The non-fiction paragraph usually begins with the general and moves towards the more specific so as to advance an argument or point of view. Each <a title="A paragraph typically consists of a unifying main point, thought, or idea accompanied by <b>supporting details</b>">paragraph</a> builds on what came before and lays the ground for what comes next. Paragraphs generally range three to seven sentences all combined in a single paragraphed statement. In prose fiction successive details, for example; but it is just as common for the point of a prose paragraph to occur in the middle or the end. A paragraph can be as short as one word or run the length of multiple pages, and may consist of one or many <a rel="tooltip" title="Testing of Sentences">sentences</a>. When dialogue is being quoted in fiction, a new paragraph is used each time the person being quoted changed.
  141. </div>
  142.  
  143. </body>
  144. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement