Tạo tooltip cho menu với jQuery tooltip

Sử dụng plugin của jQuery giúp website chúng ta có thêm nhiều thông tin hơn bằng cách sử dụng tooltip mà vẫn tiết kiệm được vị trí bố trí text và làm cho giao diện đơn giản hơn mà vẫn đẹp.

Tooltip sẽ được hiện lên khi chúng ta rê chuột vào bất cứ phần tử nào của trang web ( thẻ a , hình ảnh ... ) và có thể được giữ lại trên màn hình bằng cách bấm phím 's' hoặc click chuột phải. Nội dung của mỗi tooltip là các đoạn mã HTML vì thế rất dễ dàng cho chúng ta chỉnh sửa.

Bài viết sau đây giúp các bạn thể hiện tooltip ngay trên chính menu của mình để tạo một menu nhỏ ấn tượng và thu hút người dùng


Cách sử dụng như sau:
1. Khai báo sử dụng thư viện của jquery 

CODE


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>     

2. Mã HTML thể hiện menu: 

CODE


<div id="menu">

     <ul>
          <li><a href="#"><img src="user.png" width="32" height="32" alt="My Profile" title=""/></a></li>
          <li><a href="#"><img src="photo.png" width="32" height="32" alt="Photo Gallery" title=""/></a></li>
          <li><a href="#"><img src="bookmark.png" width="32" height="32" alt="Social Bookmarking Tools" title=""/></a></li>
          <li><a href="#"><img src="rss.png" width="32" height="32" alt="RSS" title=""/></a></li>
          <li><a href="#"><img src="search.png" width="32" height="32" alt="Search" title=""/></a></li>          
          <li class="selected"><a href="#"><img src="setting.png" width="32" height="32" alt="Control Panel" title=""/></a></li>
     </ul>

     <!-- If you want to make it even simpler, you can append these html using jquery -->
     <div id="box"><div class="head"></div></div>

</div>

3. Mã CSS cho menu 

CODE


body {
          font-family:georgia;
          font-size:14px;
     }
     
     a {
          text-decoration:none;
          color:#333;
          outline:0;
     }
     
     img {
          outline:0;
          border:0;
     }
     
     #menu {
          /* you must set it to relative, so that you can use absolute position for children elements */
          position:relative;
          text-align:center;
          width:583px;
          height:40px;
     }
     
     #menu ul {
          /* remove the list style and spaces*/
          margin:0;
          padding:0;
          list-style:none;
          display:inline;
                    
          /* position absolute so that z-index can be defined */
          position:absolute;
          
          /* center the menu, depend on the width of you menu*/
          left:110px;
          top:0;
          
     }
     
     #menu ul li {
          
          /* give some spaces between the list items */
          margin:0 5px;
          
          /* display the list item in single row */
          float:left;
     }
     
     #menu #box {
          
          /* position absolute so that z-index can be defined and able to move this item using javascript */
          position:absolute;
          left:0;
          top:0;
          z-index:200;

          /* image of the right round()ed corner */
          background():url(tail.gif) no-repeat right center;
          height:35px;


          /* add padding 8px so that the tail would appear */
          padding-right:8px;
          
          /* set the box position manually */
          margin-left:5px;
          
     }
     
     #menu #box .head {
          /* image of the left round()ed corner */
          background():url(head.gif) no-repeat 0 0;
          height:35px;
          color:#eee;
          
          /* force text display in one line */
          white-space:nowrap;

          /* set the text position manually */
          padding-left:8px;
          padding-top:12px;
     }

4. Đoạn lệnh jQuery để thực thi tạo tooltip khi rê chuột lên menu 

CODE


$(document).ready(function () {

          //transitions
          //for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
          var style = 'easeOutExpo';
          var default_left = Math.round()($('#menu li.selected').offset().left - $('#menu').offset().left);
          var default_top = $('#menu li.selected').height();

          //Set the default position and text for the tooltips
          $('#box').css({left: default_left, top: default_top});
          $('#box .head').html($('#menu li.selected').find('img').attr('alt'));                    
          
          //if mouseover the menu item
          $('#menu li').hover(function () {
               
               left = Math.round()($(this).offset().left - $('#menu').offset().left);

               //Set it to current item position and text
               $('#box .head').html($(this).find('img').attr('alt'));
               $('#box').stop(false, true).animate({left: left},{duration:500, easing: style});     

          
          //if user click on the menu
          }).click(function () {
               
               //reset the selected item
               $('#menu li').removeClass('selected');     
               
               //select the current item
               $(this).addClass('selected');
     
          });
          
          //If the mouse leave the menu, reset the floating bar to the selected item
          $('#menu').mouseleave(function () {

               default_left = Math.round()($('#menu li.selected').offset().left - $('#menu').offset().left);

               //Set it back to default position and text
               $('#box .head').html($('#menu li.selected').find('img').attr('alt'));                    
               $('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});     
               
          });
          
     });