4791 fans
1036 reader
122 followers

jQuery Tooltip

Publish by: Demon Warlock
In category: jQuery
41 comments

Tutorial Details
Độ khó: Trung Bình
Thời gian: 18:44 phút
File size: 82.23 MB
Yêu cầu: Căn bản jQuery

Tooltip rất phổ biến trên nhiều trang web bởi vì nó giúp bạn tiết kiệm nhiều khoảng trông trên trang web để dành cho những thông tin quan trọng hơn. Đa phần Tooltip được dùng để cung cấp thông tin bổ sung cho một đối tượng nào đó. Trong bài này chúng ta sẽ sử dụng jQuery để tạo ra tooltip.

Bài này ở mức độ trung bình có nghĩa là bạn phải biết một chút kiến thức về HTML và CSS, bởi vì tôi không giải thích kỹ những phần này mà chỉ tập trung vào phần viết mã jQuery. Nếu bạn có gì không hiểu hãy tìm hiểu thêm các phần CSS khác hoặc post dưới phần comment

Demon Warlock

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

http://trannguyen.net Wayne

Trong trường hợp của em là những đường link (có tooltip) nằm cạnh nhau, sau khi thẻ ‘p’ được show lên nó sẽ che những link nằm dưới (link sẽ không click vào được). Vì thế nếu rơi vào trường hợp này nên sử dụng .addClass(‘hidden’); thay cho .animate({opacity: 0}, ‘fast’);.

Cảm ơn anh đã chia sẽ tut hay.
comnhom

Cảm ơn a rất nhiều đã học rất nhiều và đọc cũng nhiều nhưng hôm nay mới cm thật xin lỗi a quá .
Mong a có những bài hướng dẫn tuyệt vời như thế này nữa nhé.
http://vip12a7.tk JimmyLin

Anh ơi cho em hỏi chút về tooltip với jQuery.
Có cách nào cho tooltip di chuyển theo tọa độ của chuột không..theo vị trí của chuột…khi chuột di chuyển qua đối tựong thì tooltip cũng di chuyển sát kề theo chuột.
Thanks!
- Toan
  
  có cả tá bạn à… lên mạng search và down về nhiều lắm.
http://devnet.vn HeartOfIce

thanks a nhiu` nhé !
http://niit-thanglong.net Xben

Anh ơi cho em hỏi chút. Khi em là xong tooltip giống như của anh nhưng mà em nhận thấy một điều là thẻ p mà ẩn đi khi hover qua nó hiện lên nhưng mà nó không chạy mà nó bị cố định tại một chỗ tim tìm thì nó phụ thuộc vào element.style{left: 260px;top: -20px;}

anh có thể giải thích rõ cho em được không.
Em cảm ơn nhiều
nhatchimai111

sao em sử dụng thẻ marquee bao thẻ li thì tooltip không cho kết quả như trước khi sử dụng thẻ marquee
thanhson10f

các bài trên izwebz thật là hayk, em cám ơn anh DW, à, mà sao cuối video em thấy anh có chỉ cách nhấn quảng cáo mà sao giờ cuối mỗi bài viết em ko thấy để nhấn nơi
ĐamMe

Anh DW, anh hã giúp bọn em làm thêm 1 video về tooltip trong CSDL được không ạ?
Vd:Em di chuột vào một hình ảnh sản phẩm thì các thông tin tương ứng với sản phẩm đó được đưa lên như trang: http://thegioididong.com/sieu-thi-dien-thoai-di-dong%2Ctrang-chu-42.aspx
Thank anh rất nhiều!
Nguyen Ba Thanh

Anh oi.e hoi một chút được không ạ.Em hơi lười tí.Co tool nào hỗ trợ code jquery không a nhỉ .Ví dụ nhu C# co visual Studio,con php co phpDesigner .Thanks a nhieu
Trường An

Anh có thể chỉ em và mọi người khi mà rê chuột vào một hình ảnh thì nó phóng to hơn và có chú thích mà phải di chuyển theo con trỏ khi con trỏ di chuyển trên tấm hình nhỏ không? Hiệu ứng giống như trang web này http://www.vatgia.com/home/. Cảm ơn anh trước!
- http://www.izwebz.com Demon Warlock
  
  Em search JQuery image zoom Plugin! rất đơn giản để áp dung.
  
  http://www.denbagus.net/jquery-image-zoom-and-tutorial/
levandong

Anh ơi cho em hỏi chút. Anh cho em link down ide hỗ trợ jquery nhé. Anh gửi link vào mail cho em nhé.
thanhk you
chukudu

Anh DW em ngưởng mộ anh thật. Không biết cách này có thể áp dụng cho Image được không anh.
- Ví dụ: di chuyển chuột vào image thì image lớn hơn.
- Ah sẳng tiện cho em hỏi làm cách nao ghi và xuất COMMENT đến CSDL MySQL mà không nhập lẫn với mã HTML vậy anh. Vi dụ: khi ghi comment:
“Chao anh DW” với chữ in đậm “Chao anh DW”.
- http://www.themetiger.com Nguyen Duc
  
  Em hỏi khó hiểu quá, ko biết ai hiểu không còn anh ko hiểu .
  - “Xuất” –> chỉ từ database ra chứ ko có “Xuất vào”
  
  - CSDL từ MySQL thì ko bao giờ lẫn được với HTML cả, còn nếu em muốn chữ “Chao anh DW” bold lên thì có thể replace nó khi print ra màn hình.
Nguyễn Hoàng Phong

Không biết cảm ơn thế nào.Nhưng thật sự rất ngưỡng mộ Anh.Em có một mơ ước nho nhỏ là có thể làm bạn với Anh và được anh chỉ giáo vì chắc chắn một điều là kiến thức của Em không bằng 1/1000 của Anh.

Em ham cái nghề này nhưng còn non quá Anh ạ.Lại không biết bắt đầu cái gì trước.

Chào Anh!
http://khôngcó khỉ kukumalu

Anh DieMem WaNóc làm một cái jquery về Slider cho mọi nguời học hỏi y.
honnhienh

Demon Warlock@ bởi vì mình thấy trên trang tuoitre.vn hay một số trang khác khi mà tại một số vị trị cái link của mình nó lằm sát phía dưới (bottom) nếu mặc định cái tooltip hiện ở phía dưới (nếu ở phía trên thì ngược lại vị trí link ở ngay top của trình duyệt) thì cái tooltip sẽ bị che mất một phần. Vì zậy tại cái vị trí này thì cái tooltip của mình khi bị che mất nó tự động hiện ở phía ngược lại để giảm tình trạng bị che khuất. Mình cũng đang làm chưa có kết quả như mong muôn . Rất mong sự giúp đỡ của các bạn.

alex @ bạn có thể dùng ajax để lấy nội dung cho cái tooltip này. Ajax thì trên này có nhiều tus rùi mà.
http://www.izwebz.com Demon Warlock

Tôi không thực sự hiểu ý bạn lắm. Nhưng nếu đúng thì bạn có thể sử dụng Event và gán các giá trị pageX và pageY để phát hiện tọa độ của chuột và hiển thị theo nó.

Các video về jQuery của tôi chỉ đả động đến một mảng đề tài và không đi quá sâu vì một vài lý do:

1. Tôi không muốn video quá dài

2. jQuery quá mạnh và nhiều chức năng, không thể một video mà làm hết được.

3. Nhiều quá học dễ bị rối, chia nhỏ ra học cho nó dễ vào hơn

4. Đề cập nhiều vấn đề trong một tut dễ làm người xem nản, đặc biệt với những ai mới bắt đầu

@alex: hà hà! lại là câu hỏi kiểu “dzu dzo” này!!!
honnhienh

cái tooltip cũng khá phức tạp. Mình cũng đang làm nó còn một số vẫn đề hình như chưa thấy bác DW đề cập qua đó là vị trí của cái tooltip trên trình duyệt. Mình thấy mấy cái tooltip trên mấy cái site thì khi nó đia ra bất kỳ một biên nào đó của trình duyệt thì nó sẽ hiện ngược lại (nó mà bị chạm bên trái thì nó sẽ tự động hiện bên phải .. trên dưới cũng zậy) Mình cũng đang tìm cách làm cái này vì nó áp dụng cho menu . Nhân tiện tutorial của DW thì cho mình hỏi luôn có cách nào giải quết vẫn đề trên không ?
alex

cám ơn anh DW nhé, từ ngày biết đến izwebz cũng học đc nhiều thứ
- à mà anh ơi anh có thể hướng dẫn cách tạo tooltip xuất từ database được không

thanks anh
http://www.izwebz.com Demon Warlock

@Khỉ kukumalu: thx chú! đã fix lại rồi.
http://NOcó khỉ kukumalu

cái source không down được bị die rùi.
http://duongpho.net MrV2m

Hay lắm như mọi khi. Cố gắng lên nhá bro.
http://kookee.tk mrkyt

Ủng hộ DW !!!! Lúc nào có DVD em phải mua ngay 1 DVD về css mới được (tuy đã down và học hết rồi :”> )

Cái nữa, anh có thể ra 1 series PHP khác với series của CS được không ạ? Em thấy khả năng sư phạm của anh cao hơn, bọn em sẽ dễ tiếp thu hơn. Mong anh xem xét đề nghị hơi phù phiếm này
http://ictexpress.com Nguyễn Ngọc Long

Anh ơi mấy đường link video cũ bị lỗi có cách nào hiển thị lại không a. E muốn xem lại nhưng không được. Cách tốt nhất là anh nên upload lên mediafire để phòng hờ cho mọi người download nhé
http://updatesofts.com htluds

Trong bài này em nghĩ có thể dùng `siblings(‘p’)` để thay cho việc đi ngược lên parent rồi lại `find(‘p’)`
Thêm nữa là chỗ `$(this)` không biết có thay được bằng `this` ko anh nhỉ
http://www.izwebz.com Demon Warlock

Ý kiến của bạn rất hay, tôi sẽ tiếp thu để làm các DVD sau này.

Như tôi nói trong bài đã post về bộ DVD, mục đích chủ yếu tôi làm DVD không phải vì lợi nhuận mà là vì tôi biết nhiều người ở Vn không có điều kiện download những video quá lớn của izwebz.

Giá thành bán ra chỉ vừa đủ để trả tiền mua DVD trắng, tiền bưu điện, công người giúp tôi phân phối DVD. Tôi nghĩ không nhiều hơn mấy ly cà phê đâu.
- PhongThanh
  
  Anh DM ơi cho em hỏi .
  DVD và những quyển sách anh viết ơ VN em kiếm hoài không thấy anh cho em hỏi có thể mua được đâu?
  Em đang ở TPHCM .
  Những bài viết và tut của anh rất hay.
  cảm ơn anh .
Hoàng Minh Tuấn

DW nên tổng hợp mỗi chuyên mục vào một DVD, mỗi DVD này tập trung vào một chủ đề và các TUT phải được sắp xếp theo một tiến trình về nội dung cũng như kiến thức, nên đặt tên mỗi DVD đó = tên đĩa + Version 1.0, để sau này bổ sung các TUT sẽ cho ra các DVD Version 2.0, 3.0,… Mình nghĩ giá thành của các DVD này nên mềm một chút, lấy số lượng bù chất lượng. Không gì thì website của mình cũng ra đời với mục đích phục vụ Free cho bà con yêu và đam mê công nghệ web là chính, nên cũng đừng làm mất đi bản sắc mà thương mại hóa các bài viết.

Ps: Mình sẽ đặt mua tất cả các DVD để ủng hộ IZWEBZ khi nào các DVD nóng hổi nhất ra lò. :X:x
vantay

ô đúng là sư phụ có khác em làm đúng như anh vừa nói , mà em chạy được liền ^^
thanks sư phụ nhiều lém
chúc anh sức khỏe và mau chóng ra album DVD đầu tay nhé!!! em sẽ mua đầu tiên
http://www.izwebz.com Demon Warlock

Bây giờ em thử download cái bản source code của anh về máy rồi chạy thử xem có được không. Nếu chạy được thì em xoá hết code jQuery của anh đi rồi làm trên file đó xem thế nào.

Anh nghĩ em viết sai cái gì đó, vì jQuery chỉ cần thiếu một dấu phảy cũng không chạy rồi.
vantay

anh DW sao em đặt đường link trên file html để sử dụng phiên bản jquery có sẵn trên google mà không được ạ
em làm từng bước theo chapter 1 của anh mà vẫn không chạy được ,
em mới biết đến Jquery thôi ạ , mong anh hướng dẫn giúp em cái phần down jquery hay là đặt đường dẫn đến thư viện jquery kỹ hơn một chút được không ạ! em đang rất cần , vì được học tập những tutorials bổ ích của anh em mê quá , không thể chờ lâu được , nhưng tiếc là gõ code song chạy lại không được , chán quá anh ơi !
em chân thành cảm ơn anh ạ
http://shopthoitranghanghieu.com AnJungHoan

Cảm ơn anh vì tất cả những gì anh chia sẻ!!!!

Izwebz store

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.