Cách tạo chú giải công cụ với jquery mà không cần plugin?

Tôi đã sử dụng một vài plugin công cụ khác nhau trong những năm qua, nhưng tôi nghĩ rằng nó trở thành thời gian để viết của riêng tôi. Đơn giản, tôi không tìm kiếm một plugin có tất cả các tùy chọn, vì tôi biết làm thế nào tôi muốn mọi tooltip bật lên để xem và hành xử. Hầu hết các plugin đều có một loạt các hoạt ảnh và vị trí có sẵn và tôi nghĩ rằng đó là quá nhiều cho trọng lượng nhẹ tôi muốn tạo, với sự giúp đỡ của bạn tất nhiên :)Cách tạo chú giải công cụ với jquery mà không cần plugin?

Về cơ bản, sử dụng thuộc tính tiêu đề của di chuột, tôi muốn chú giải công cụ xuất hiện trực tiếp ở trên và căn giữa với phần tử đang được di chuột qua.

Tôi biết cách điền div sẽ được hiển thị, nhưng những gì tôi đang cố gắng giải quyết, là cách nói cho div đó tự định vị trực tiếp phía trên phần tử.

lý tưởng việc này được thực hiện với mã tối thiểu. Logic của tôi nói điều gì đó như thế này (mã giả):

<html> 
<head> 

<style type="text/css"> 

    #myToolTip { display: none; } 

</style>

<script type="text/javascript"> 

$(document).ready(function() { 

    $('.hoverAble').hover(function(){ 

     var tip = $(this).attr('title'); 

     $('#myToolTip').html(tip).fadeIn(); 

    }, function() { 

     $('#myToolTip').fadeOut(); 

    } 

}); 
</script> 
</head> 
<body> 

<div id="myToolTip"></div> 

<div class="hoverAble" title="I am good at code"></div> 

</body> 
</html>

tất nhiên đoạn mã trên là chỉ cần đi để điền vào các tooltip và không được bố trí tương đối so với các yếu tố dao động. Đó là nơi mà sự hiểu biết của tôi rơi ngắn. Bạn có thể giúp?

Chỉnh sửa: Chỉ để làm rõ, tôi không muốn chú giải công cụ di chuyển bằng chuột.

Nguồn

2009-08-10 willdanceforfun

trong mã của bạn có lỗi sẵn sàng (function() {}); khung bị thiếu! –

tx cho john đó! – willdanceforfun

Hãy nhìn vào khác nhau CSS functions trong jQuery, chủ yếu là offset() và có thể height() .

// pseudocode, assuming #tooltip has position: absolute 
// do something similar with the left offset as well 
$('#tooltip').css({ top : $('#link').offset().top + 10 + 'px' });

Điều này sẽ đặt chú giải công cụ tĩnh hơn hoặc gần với liên kết mà tôi nghĩ là những gì bạn đang tìm kiếm. Nếu bạn muốn chú giải công cụ di chuyển bằng chuột, bạn sẽ cần cập nhật động vị trí trong sự kiện mousemove.

Nguồn

2009-08-10 12:41:07 deceze

tôi nghĩ rằng đây là nó. có vẻ hiển nhiên bây giờ để xem các hàm css ở đó! – willdanceforfun

Đầu dường như hoạt động tốt, nhưng thuộc tính 'trái' của tôi dường như không làm bất cứ điều gì: $ ('# tooltip'). Css ({top: $ (this) .offset(). Top - 50 + 'px ', left: $ (this) .offset()}); - bất kỳ ý tưởng nào? – willdanceforfun

'offset()' trả về một đối tượng có thuộc tính "top" và "left", vì vậy bạn phải sử dụng 'offset(). Left'. Bạn cũng đính kèm "px"? – deceze

Nếu không có ví dụ mã cụ thể, bạn có thể xem nội dung của đối tượng sự kiện (Tôi giả sử bạn đang thực hiện việc này trên sự kiện onmouseover).

bạn tính clientX và clientY điều này sẽ giúp

Kiểm tra sau đây cho các đối tượng sự kiện:

http://www.javascriptkit.com/jsref/event.shtml

Nguồn

2009-08-10 12:40:01

Tôi nghĩ điều này có thể giúp ích cho bạn.

<html> 
<head> 
<style type="text/css"> 
    #myToolTip { display: none;position:absolute; } 
</style> 
<script type="text/javascript" src='js/jquery.js'></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $('.hoverAble').hover(function(e){ 
     var left = mouseX(e); 
     var top = mouseY(e); 
     var tip = $(this).attr('title'); 

     $('#myToolTip').css('top',top); 
     $('#myToolTip').css('left',left); 
     $('#myToolTip').html(tip).fadeIn(); 


    }, function() { 

     $('#myToolTip').fadeOut(); 

    }) 

});

vị trí chuột:

function mouseX(evt) { 
if (evt.pageX) return evt.pageX; 
else if (evt.clientX) 
    return evt.clientX + (document.documentElement.scrollLeft ? 
    document.documentElement.scrollLeft : 
    document.body.scrollLeft); 
else return null; 
} 

function mouseY(evt) { 
if (evt.pageY) return evt.pageY; 
else if (evt.clientY) 
    return evt.clientY + (document.documentElement.scrollTop ? 
    document.documentElement.scrollTop : 
    document.body.scrollTop); 
else return null; 
} 
</script> 
</head>

html:

<body> 

<div id="myToolTip"></div> 

<div class="hoverAble" title="I am good at code">hi catch me</div> 

</body> 
</html>

Nguồn

2009-08-10 12:52:12

xin lỗi tôi cần phải cụ thể hơn. Tôi không muốn di chuyển đầu bằng chuột .. chỉ cao hơn một chút so với phần tử hiện tại. – willdanceforfun

<div title="This is tooltip">Hover Me</div>

tooltip đơn giản này đang làm việc cho tôi. U có thể thêm bất kỳ lớp nào để làm cho nó phong cách.

Nguồn

2009-08-10 13:18:45 NAVEED

Một trong những cách dễ nhất để sử dụng chú giải công cụ jQuery.UI được tích hợp sẵn.

$(document).tooltip();

Và trong html tất cả các "danh hiệu" thẻ chuyển sang tooltip ...

<div class="juppiduppi" title="Here is a tooltip, just for you. ">Over here with the mouse... </div>

Nguồn

2013-10-06 21:43:34 huncyrus

Cách tạo chú giải công cụ với jquery mà không cần plugin?

Trả lời

Các vấn đề liên quan