Gửi đến mọi người thêm một kiểu toplip đẹp nữa, có thể ứng dụng trong các đồ án website html, asp, php,.... Hướng dẫn cài đặt: 1. Tạo file toplip.js với nội dung bên dưới Mã: $(document).ready(function() { //Tooltips var tip = null; $(".tooltip").hover(function(){ //Caching the tooltip and removing it from container; then appending it to the body tip = $(this).find('.tip').remove(); $('body').append(tip); tip.show(); //Show tooltip }, function() { tip.hide().remove(); //Hide and remove tooltip appended to the body $(this).append(tip); //Return the tooltip to its original position }).mousemove(function(e) { //console.log(e.pageX) if ( tip == null ) return; var mousex = e.pageX + 20; //Get X coodrinates var mousey = e.pageY + 20; //Get Y coordinates var tipWidth = tip.width(); //Find width of tooltip var tipHeight = tip.height(); //Find height of tooltip //Distance of element from the right edge of viewport var tipVisX = $(window).width() - (mousex + tipWidth); var tipVisY = $(window).height() - (mousey + tipHeight); if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport mousex = e.pageX - tipWidth - 20; $(this).find('.tip').css({ top: mousey, left: mousex }); } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport mousey = e.pageY - tipHeight - 20; tip.css({ top: mousey, left: mousex }); } else { tip.css({ top: mousey, left: mousex }); } }); }); 2. Tạo file toplip_css.css với nội dung bên dưới. Mã: @charset "utf-8"; /* CSS Document */ /*--Tooltip Styles--*/ .tip { color: #000000; background:#fffccc; opacity:0.9; filter:alpha(opacity=90); padding:8px; position:absolute; z-index:1000; border: 1px solid #ffd800; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width:320px; } .tooltip .tip { display:none; } .tip .tooltip_img{ border:#ffe13b 1px solid; background: #FFFFFF; margin: 3px 5px 0 0; padding:2px; } .fl { float: left; } span p { font-size:13px; } 3. Chèn nội dung bên dưới vào cặp thẻ <head> Mã: <!-- toplip--> <script type="text/javascript" src="link đến file toplip.js"></script> <link rel="stylesheet" href="link đến file css.css" type="text/css" /> <!-- /toplip--> 4. Gọi toplip Ở đây mình hướng dẫn hiển thị toplip đối với link, còn với ảnh hay text gì đó mọi người nghiên cứu thêm nhé, tương tự nhé! Các bạn đã biết, trong html link thường có dạng cơ bản <a href="link">text</a> Trong trường hợp muốn chèn thêm toplip, chỉ việc thêm một tý vào đó thôi. Mình đưa đoạn code này: Rõ ràng rồi không giải thích thêm nhé, đoạn màu đỏ là đoạn cần thêm vào, thông tin nằm trong thẻ span Demo: Ngay tai 2mit Chúc thành công!
