tooltip מבוסס jQuery

מדריך זה מציג ומדגים tooltip, שיחליף את ה-title המסורתי, ויציג נתונים בצורה מהודרת כשמרחפים עם העכבר על כל אלמנט שהוא בדף ה-HTML.

ה-tooltip מגיע בתוך ה-HTML ובתוך דיבים ששמם tooltip.

ה-HTML

לצורך הפשטות, אני מציג טבלה שמכילה תא בודד עם דיב tooltip.

<table>
<tr>
  <td class="has_event">
    <p>מבוא ל-javascript</p>
    <p>יום ה' 5.12.13</p>
    <p>9:00 - 13:00</p>
    <div class="tooltip">
      <div class="tooltip_inner_wrapper">
        <h3 class="headline">מבוא ל-javascript</h3>
        <div class="date">יום ה' 5.12.13 | 9:00 - 13:00</div>
        <div class="further">בתיאום מראש</div>
        <div class="teaser">נסקור את הבסיס שמשמש ב-javascript, כולל DOM וספריית jQuery</div>
      </div>
    </div>
  </td>
</tr>
</table>

ה-jQuery

מיקום הטולטיפ נעשה באמצעות הפונקציה tooltipPosition שמשתמשת ב-event שמייצר העכבר כשעושים אתו mouseover ו-mousemove כדי לזהות את מקום הסמן. הפונקציה מביאה בחשבון את מיקום הסמן על המסך, למטה או למעלה מקו האמצע, ומימין או משמאל למרכז המסך.

האירוע mouseover על תאי הטבלה מפעיל את הפונקציה showTooltip, שתפקידה להראות את הטולטיפ. הזזת העכבר גורמת להנעת הטולטיפ, כך שהוא מלווה את העכבר. נושא זה מטופל באמצעות הפונקציה moveTooltip, כשיציאת העכבר מתא בטבלה מסתיר את הטולטיפ ואת הקלאסים הנלווים אליו, ובזה מטפלת הפונקציה mouseLeave.

<script>
(function($) {
  $(document).ready(function(){
    // Checks for the table dimensions and position.
    var table = $('table');
    var tableWidth = table.outerWidth();
    var tableHeight = table.outerHeight();
    var tableOffset = table.offset();
    var tableOffsetTop = tableOffset.top;
    var topScope = tableOffset.top + .5 * tableHeight;
    var tableOffsetLft = tableOffset.left;
    var lftScope = tableOffsetLft + .5 * tableWidth;
 
    // Positions the tooltip.
    function tooltipPosition(tooltip, event){
      var event_page_y = 0;
      var event_page_x = 0;
 
      var event_page_y = event.pageY;
      var event_page_x = event.pageX;
 
      if(event_page_y > topScope){
        // Bottom
        pos_top = event_page_y - 20;
        tooltip.addClass('bottom');
      } else {
        // Top
        pos_top = event_page_y - 120;
        tooltip.addClass('top');
      }
 
      if(event_page_x > lftScope){
        // Right
        pos_lft = event_page_x + 50;
        tooltip.addClass('right');
      } else {
        // Left
        pos_lft = event_page_x - 370;
        tooltip.addClass('left');
      }
 
      // Positions the tooltip.
      tooltip.css({
        left : pos_lft,
        top : pos_top
      });
    }
 
    // Third, hides the tooltip on mouse leave.
    function mouseLeave(tooltip, td){
      if(td.hasClass('mouseover') === true){
        td.on('mouseleave', function(){
 
          // Removes position classes.
          tooltip.removeClass('right').removeClass('left').removeClass('top').removeClass('bottom');
 
          // Hides tooltip.
          tooltip.hide(300);
 
          // Removes class.
          td.removeClass('mouseover');
        });
      }
    }
 
    // Second, moves the tooltip around with the cursor.
    function moveTooltip(tooltip, td){
 
      if(td.hasClass('mouseover') === true){
        td.on('mousemove', function(event){
 
          // Positions the tooltip.
          tooltipPosition(tooltip, event);
        });
 
        // Calls the next function.
        mouseLeave(tooltip, td);
      }
    }
 
    // First, shows the tooltip.
    function showTooltip(td, event){
      // Finds the relevant tooltip.
      var tooltip = td.find('.tooltip');
 
      // Hides all the other tooltips.
      td.siblings('td').find('.tooltip').hide();
 
      if((td.hasClass('has_event') === true) && (td.hasClass('mouseover') !== true)){
        // Positions the tooltip.
        tooltipPosition(tooltip, event);
 
        // Shows the tooltip.
        tooltip.show(300);
 
        // Flags the current td.
        td.addClass('mouseover');
 
        // Calls the next function.
        setTimeout(function(){
          moveTooltip(tooltip, td);
        }, 330);
      }
    }
 
    // Fires once the mouse enters the element.
    $('table').on('mouseover', 'td', function(event){
      // Calls the function and passes this with the mouseover event.
      showTooltip($(this), event);
    });
  });
})(jQuery);
</script>

ה-CSS

מיקום הטולטיפ נעשה באמצעות position : absolute בתוספת z-index.

ליצירת החץ השתמשתי בתכונה של CSS שנקראת content, ונתמכת על ידי רוב הדפדפנים המודרניים.

body{
  direction: rtl;
}
 
table{
  width: 440px;
  margin: 200px auto;
}
 
table td{
  border: 1px solid #000000;
  width: 102px;
  padding: 10px;
}
 
.tooltip:before{
  content: '.';
  position: absolute;
  font-size: 0px;
  line-height: 0px;
}
 
.tooltip.left:before{
  margin-right: -18px;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-left: 5px solid #0266b4;
}
 
.tooltip.right:before{
  margin-right: 318px;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-right: 5px solid #0266b4;
}
 
.tooltip.top:before{
  margin-top: 107px;
}
 
.tooltip.bottom:before{
  margin-top: 27px;
}
 
.tooltip{
  display: none;
  position: absolute;
  z-index: 99;
  padding: 10px;
  border: 3px solid #0266b4;
  background: #ffffff;
  width: 305px;
  padding: 10px;
  -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
  box-shadow: 2px 2px 5px #999999;
}

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים