Đề xuất cho các chú giải công cụ jQuery

Question

Tôi đang tìm các plugin công cụ cho jQuery để cho phép loại hành vi sau đây.

<a href="somewhere.html"> 
<span> 
    <img src="someimage.jpg" style="display: none;" /> 
    Here is the tooltip content. 
</span> 
Here is the link to somewhere. 
</a> 

Các hành vi mà tôi hy vọng là để di chuột qua "Đây là liên kết đến một nơi nào" và có một tooltip bật lên hiển thị nội dung của nhịp có chứa "someimage.jpg" và "Đây là tooltip Nội dung".

Tôi muốn theo dõi chú giải công cụ cùng với chuyển động của chuột qua liên kết và xuất hiện của chú giải công cụ (màu nền, độ mờ đục, màu đường viền, vv) có thể định cấu hình được.

Hai chú giải công cụ phổ biến nhất mà tôi đã tìm thấy, "clueTip" và "Chú giải công cụ" của Jörn Zaeffer dường như không phù hợp với hóa đơn, trừ khi tôi thiếu thứ gì đó.

Cuối cùng, các liên kết và hình ảnh sẽ được tạo động.

Answer 1

Tôi là người hâm mộ lớn của BeautyTips

Answer 2

Nó có phải là một câu hỏi không? Bạn có thể làm điều đó chỉ với CSS nếu bạn muốn.

a.info 
{ 
    position: relative; 
    z-index: 24; 
} 

a.info:hover 
{ 
    z-index: 25;  
} 

a.info span 
{ 
    display: none; 
} 

a.info:hover span 
{ 
    display: block; 
    position: absolute; 
    top: 2em; 
    left: 2em; 
    width: 15em; 
    padding: 6px; 
    border: 1px solid black; 
    background-color: #eeeeee; 
    color: #000; 
} 

Sau đó, bạn có thể sử dụng nó giống như bạn có.

<a href="somewhere.html" class="info"> 
<span> 
    <img src="images/someImage.jpg" /> 
    Here is the tooltip content. 
</span> 
Here is the link to somewhere. 
</a> 

EDIT

Đọc liều hàng ngày của tôi về blog this article đến sự chú ý của tôi. Họ tạo ra một plugin jquery mà làm những gì bạn muốn, bật lên một hình ảnh với các tùy chọn phong cách và di chuyển chuột. Kiểm tra kết quả ở đây.

http://james.padolsey.com/demos/imgPreview/full/

Bạn sẽ có thể hoặc là làm theo các hướng dẫn và viết các plugin hoặc tải về các plugin ví dụ.

Answer 3

OHHHHHHHH Tốt nhất!

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Demo: (tìm các "Liên kết để yahoo" ví dụ để đáp ứng tất cả nhu cầu của bạn)

http://jquery.bassistance.de/tooltip/demo/

EDIT: tôi thấy bạn đề cập Jorn (i không biết tên của mình) nhưng hãy tìm ví dụ "yahoo", nó sẽ làm những gì bạn muốn.

Answer 4

ive suy nghĩ của việc sử dụng này: http://www.codylindley.com/blogstuff/js/jtip/

và điều này: http://onehackoranother.com/projects/jquery/tipsy/

những người khác nên có thể phù hợp với nhu cầu của bạn tốt hơn

Answer 5

nói cho bạn sự thật, tôi đã thử một vài trong số họ nhưng tôi 'gắn bó với một cái mà tôi thực sự thích:

http://craigsworks.com/simpletip/sandbox/

có rất nhiều thứ bạn có thể thay đổi và chúng trông tuyệt vời ở mọi nơi! :)

alt text http://www.balexandre.com/temp/StackOverflow_jquerySimpleTip.png

Cập nhật

Như PBZ nói, đây là không còn có sẵn cho infrangiments bản quyền, nhưng tương tự có thể được tìm thấy trong các nhà phát triển 'gốc' tại

http://www.nickstakenburg.com/projects/prototip2/

Answer 6

Bạn cũng có thể thử một công cụ gọi là Likno Web Tooltips Builder: http://www.likno.com/jquery-tooltips/index.php

Answer 7

Đơn giản chỉ cần tốt nhất http://flowplayer.org/tools/tooltip/index.html

Answer 8

Dưới đây là một tooltip jQuery có thể làm được khá nhiều bất cứ điều gì, sẽ rất tốt quá:

Cặp đôi http://projects.nickstakenburg.com/tipped

Answer 9

Điều này sẽ cho phép bạn đặt bất kỳ thứ gì bạn muốn vào hộp mẹo công cụ.
http://code.google.com/p/next-msg/

Thêm vào đó nó có chủ đề

Answer 10

Tôi khuyên bạn nên ClueTip: http://plugins.learningjquery.com/cluetip/ Thật dễ dàng để sử dụng, hỗ trợ ngắt dòng trong lời khuyên cụ (với một tách tự do cấu hình) và dường như làm việc tốt trong các tế bào bảng (đó không phải là trường hợp với http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/).

Answer 11

qTip - không nghi ngờ gì về điều đó

Xem here, quá

Answer 12

Đây là một tuyệt vời nhất tôi sử dụng, nó có một vị trí và chuột theo tùy chọn, cũng đi kèm với một loạt các chủ đề ra khỏi hộp . http://www.websanova.com/plugins/websanova/tooltip

Answer 13

jQuery UI bây giờ có một built-in module tooltip: http://jqueryui.com/tooltip/

trình tốt và có thể dễ dàng tùy chỉnh.

Answer 14

Tôi cũng đã xây dựng a jQuery plugin for tooltips - nó thực sự nhỏ - 5KB được rút gọn, rất dễ cài đặt và sử dụng và với nhiều tùy chọn cấu hình; nó sẽ định vị các mẹo bên trong khung nhìn bất kể cuộn dọc/ngang hoặc kích thước cửa sổ; Chiều rộng và màu nền có thể được thay đổi khi khởi tạo. Nó không sử dụng bất kỳ hình ảnh nào - nó sử dụng CSS cho tất cả các công cụ ưa thích và làm suy giảm một cách duyên dáng cho các trình duyệt cũ hơn. Nó hoạt động ngay cả trong IE6 :) Và, theo mặc định, nó trông như thế này:

Answer 15

NewTip ->

 New Tooltip JQuery plugin with support in browsers from IE7+, Firefox, Chrome 

Rất hấp dẫn và dễ dàng để tùy chỉnh cho cả hai sự kiện xử lý callbacks và cho bất kỳ loại phần tử nào.

cung cấp cho nó một thử:

JQuery Plugin Registry: http://plugins.jquery.com/newtip/

Github Home Page: https://github.com/chandra7mca/newtip