Chú giải công cụ html thả xuống. Chú giải công cụ html và css không có tập lệnh

Chú giải công cụ HTML là một khối có thông tin thêm, xuất hiện khi bạn di chuột qua yếu tố cụ thể trang web. Hôm nay chúng ta sẽ tạo chú giải công cụ của riêng mình với sử dụng HTML và CSS:

Xem bản demo | Tải mã nguồn xuống

Chúng tôi sẽ có thể sử dụng gợi ý CSS cho hầu hết các thành phần như liên kết, thẻ, văn bản theo kiểu, v.v. Chúng ta sẽ cần áp dụng một số lớp cho phần tử và thêm thuộc tính data- với văn bản chú giải công cụ.

Chúng ta cần tạo một tài liệu HTML và thiết lập đánh dấu nguồn:

Bản trình diễn chú giải công cụ // nội dung

Tôi đã thêm một liên kết tới Normalize.css giúp đặt lại tất cả các kiểu trình duyệt về mặc định và đảm bảo rằng mọi thành phần đều trông giống nhau trong tất cả các trình duyệt. Khác với tiêu chuẩn đặt lại css Normalize.css không xóa tất cả các kiểu mặc định, do đó bạn sẽ không phải viết lại kiểu của từng thành phần từ đầu.

Tôi đã tạo một div có lớp chứa trong đó chúng tôi sẽ đặt các ví dụ cơ bản về chú giải công cụ HTML. Dưới đây là các kiểu cho phần thân và lớp .container:

body ( họ phông chữ: "Work Sans", sans-serif; cỡ chữ: 1.5em; chiều cao dòng: 1.4em; độ dày phông chữ: 700; màu nền: #28ABE3; màu: #fff; ) .container ( chiều rộng: 800px; lề: tự động 100px; nền: radial-gradient(vòng tròn góc xa nhất ở 400px 250px , #64BBE0 0%, #28ABE3, #28ABE3 95%); )

Tôi căn giữa div vùng chứa bằng cách đặt lề trái và lề phải thành auto . Ngoài ra còn thêm một số kiểu dáng cho phần thân để làm cho nó trông đẹp hơn.

Tôi quyết định thêm một gradient CSS nhẹ cho nền. Nếu trình duyệt không hỗ trợ CSS gradient (điều này chủ yếu áp dụng cho IE 8 và 9), màu nền sẽ được chuyển về màu xanh mặc định (màu nền của phần nội dung).

Tôi sẽ sử dụng gợi ý di chuột HTML với thẻ liên kết nhưng bạn có thể gán lớp cho các phần tử nội tuyến khác, chẳng hạn như thẻ mạnh hoặc span . Dưới là nội dung div thùng đựng hàng:

• Phần dưới cùng của chú giải công cụ
• Chú giải công cụ bên trái

  Tôi đã chỉ định hai lớp cho các liên kết. Lớp chú giải công cụ sẽ chịu trách nhiệm về nội dung chú giải công cụ và lớp thứ hai sẽ xác định vị trí của nó.

  Bạn cũng có thể xem thuộc tính data- tùy chỉnh chứa văn bản chú giải công cụ HTML của chúng tôi.

  Tạo lớp chú giải công cụ

  Dưới đây là mã cho lớp chú giải công cụ:

  Chú giải công cụ ( vị trí: tương đối; ) .tooltip:after ( vị trí: tuyệt đối; phần đệm: 8px; đường viền: 3px Solid #fff; bán kính đường viền: 8px; màu nền: #1FDA9A; cỡ chữ: .9em; độ dày phông chữ : đậm; màu: #fff; nội dung: attr(data-tooltip); chiều rộng tối thiểu: 80px; chiều rộng: -moz-max-content: 0; mức độ hiển thị: ẩn; .tooltip:hover:after (độ mờ: 1; mức độ hiển thị: hiển thị; )

  Bản thân chú giải công cụ di chuột HTML là một phần tử giả :after và được định vị tuyệt đối. Đây là lý do tại sao cần phải gán vị trí tương đối cho phần tử neo. Tôi đã thêm một số kiểu cơ bản như phần đệm, đường viền, cỡ chữ và chiều rộng. Chúng ta hãy xem xét kỹ hơn về thuộc tính nội dung.

  Nó chứa attr() - một giá trị lưu trữ chú giải công cụ dữ liệu tùy chỉnh của chúng tôi và sử dụng nó để hiển thị văn bản của chú giải công cụ. Bạn có thể sử dụng bất kỳ tên nào khác thay vì data-tooltip, chỉ cần đảm bảo rằng nó bắt đầu bằng data- . Bạn có thể tìm hiểu thêm về các thuộc tính này tại đây.

  Phần thân chú giải công cụ có chiều rộng tối thiểu là 80 pixel. Nếu bạn muốn nội dung chú giải công cụ kéo dài thành một dòng, hãy thêm giá trị cho thuộc tính chiều rộng vào max-content , tức là khoảnh khắc nàyđăng trong các ý kiến. Cần lưu ý rằng điều này hàm thí nghiệm vì vậy bạn nên sử dụng tiền tố của nhà cung cấp -webkit- và -moz- .

  Để tạo hiệu ứng hoạt ảnh cho chú giải công cụ di chuột HTML, chúng tôi sử dụng thuộc tính transition. Lưu ý giá trị 0,25s, chỉ định độ trễ trước khi chú giải công cụ được hiển thị hoặc ẩn. Như vậy, nếu bạn di chuột nhầm vào văn bản sẽ không hiển thị mà chỉ hiển thị khi bạn di chuột qua nhiều hơn. thời gian dài. Tôi cũng đặt độ mờ thành 0 và mức độ hiển thị thành ẩn . Chúng tôi không thể sử dụng display: none; , vì phần tử sẽ biến mất hoàn toàn và chúng ta sẽ không thấy bất kỳ hiệu ứng chuyển tiếp nào. Độ mờ và mức độ hiển thị thay đổi khi bạn di chuột qua một phần tử bằng con trỏ chuột.

  Kết quả:

  Nhìn

  Lưu ý: Tôi đã thay đổi/xóa một số đánh dấu và kiểu dáng trong bản demo trên CodePen. Để xem kết quả cuối cùng, hãy xem bản demo ở cuối bài viết này.

  Thêm chuyển động

  Bây giờ chúng ta đã triển khai chú giải công cụ HTML xuất hiện/biến mất khi di chuột, hãy bắt đầu di chuyển nó. Chúng ta đã gán thuộc tính hoạt ảnh, tất cả những gì chúng ta phải làm là đặt vị trí bắt đầu nơi nó sẽ xuất hiện và vị trí kết thúc:

  /*Vị trí chú giải công cụ ban đầu*/ .tooltip-top:after ( Bottom: 150%; left: 0; ) .tooltip-bottom:after ( top: 155%; left: 0; ) .tooltip-left:after ( right: 130%; chiều rộng tối thiểu: 100px; ) .tooltip-right:after ( left: 130%; min-width: 100px; ) /*Vị trí cuối của mẹo*/ .tooltip-top:hover:after ( dưới cùng: 120%; ) .tooltip-bottom:hover:after ( top: 125%; ) .tooltip-left:hover:after ( right: 110%; ) .tooltip-right:hover:after ( left: 110%; )

  Tôi quyết định thêm chức năng này vào lớp học bổ sung. Vì vậy, nếu bạn chỉ định, ví dụ: lớp .tooltip-left, chú giải công cụ sẽ xuất hiện ở bên trái văn bản, nếu bạn thêm .tooltip-top, chú giải công cụ sẽ xuất hiện ở trên cùng, v.v.

  Xem bản demo

  Trong bản demo này, tôi đang sử dụng lớp .tooltip-right. Bạn có thể thử nghiệm và sử dụng các lớp khác nhau để xác định các vị trí chú giải công cụ HTML khác nhau.

  Tạo một hình tam giác

  Phần tử cuối cùng của chú giải công cụ là một hình tam giác nhỏ ở một bên của khối. Chúng ta sẽ tạo nó bằng cách sử dụng lớp giả :trước (lớp giả :after đã được sử dụng cho chính chú giải công cụ). Chúng tôi gán nó cho bốn lớp vị trí của mình để đối với mỗi lớp, hình tam giác được xuất ra tương ứng:

  /** * Hình tam giác */ .tooltip-top:trước, .tooltip-bottom:trước, .tooltip-left:trước, .tooltip-right:trước ( nội dung: ""; hiển thị: khối; vị trí: tuyệt đối; viền- chiều rộng: 7px; màu đường viền: rgba(0, 0, 0, 0); chuyển tiếp: tất cả .2s dễ dàng ra vào .25s; top:hover:trước, .tooltip-bottom:hover:trước, .tooltip- trái:hover:trước, .tooltip-right:hover:trước ( độ mờ: 1; mức độ hiển thị: hiển thị; )

  Chúng ta tạo một hình tam giác bằng cách tạo chiều rộng cho đường viền khi bản thân phần tử không có chiều rộng hoặc chiều cao. Trong trường hợp này, chiều rộng khung được đặt thành 7 pixel. Màu khung hoàn toàn trong suốt, điều này rất quan trọng. Trong đoạn mã sau, tôi gán màu cho cạnh tương ứng của khung, điều này cho phép tôi xác định hình dạng của hình tam giác.

  Phần còn lại của kiểu dáng trông tương tự như những gì chúng tôi đã làm cho nội dung chú giải công cụ di chuột HTML. Chúng tôi có các chuyển đổi giống nhau, vị trí là tuyệt đối, độ mờ được đặt thành 0 và khả năng hiển thị bị ẩn:

  /*Vị trí bắt đầu của hình tam giác*/ .tooltip-top:trước ( top: -51%; left: 50%; Transform: TranslateX(-50%); border-top-color: #fff; ) .tooltip-bottom :trước ( dưới cùng: -56%; trái: 50%; biến đổi: dịchX(-50%); viền-dưới-màu: #fff; ) .tooltip-left:trước ( trái: -31%; trên cùng: 15% ; border -left-color: #fff; ) .tooltip-right:Before ( right: -31%; top: 15%; border-right-color: #fff; ) /* Vị trí cuối của hình tam giác */ .tooltip -top:hover :trước ( top: -21%; ) .tooltip-bottom:hover:trước ( đáy: -26%; ) .tooltip-left:hover:trước ( left: -11%; ) .tooltip-right :hover:trước ( phải: -11%; )

  Để làm cho hình tam giác di chuyển giống như chú giải công cụ, bạn cần chỉ định vị trí bắt đầu và kết thúc.

  Các chuyên gia về bố cục khó có thể tìm thấy điều gì mới cho họ trong bài đăng này. Bài đăng này dành cho những nhà thiết kế bố cục mới bắt đầu, những người giống như tôi, gặp vấn đề trong việc tạo và tạo kiểu cho các chú giải công cụ phổ quát.

  Gần đây, khi tôi đang tạo một blog nhỏ, tôi phải đối mặt với nhiệm vụ tạo ra những chú giải công cụ đơn giản nhưng đồng thời có phong cách. Đã thử những cách khác tôi đã tìm thấy việc tạo các vùng chứa div riêng biệt cho chú giải công cụ hoặc tạo chú giải công cụ bằng CSS thuần túy giải pháp phổ quát, sẽ không làm lộn xộn mã, sẽ tương thích với nhiều trình duyệt và đồng thời sẽ rất đơn giản để triển khai.
  Bất cứ ai quan tâm đến phương pháp giải quyết vấn đề đơn giản này của tôi, tôi sẽ hỏi dưới cat.

  Giải pháp Phương pháp mà tôi sẽ cung cấp cho bạn khá đơn giản và hiệu quả. Hoạt động trên tất cả các trình duyệt, kể cả IE 6 (đã được tôi thử nghiệm nhiều lần). Dễ dàng thay đổi và thuận tiện. Không làm lộn xộn mã và làm cho nó rõ ràng. Nó có thể dễ dàng thay đổi để phù hợp với nhu cầu của bạn. Ví dụ: trì hoãn việc hiển thị chú giải công cụ bằng cách sử dụng setTimeout hoặc thứ gì khác. HTML Giả sử chúng ta có một trang HTML có liên kết, khi di chuột qua nó, chúng ta cần hiển thị chú giải công cụ:
  Liên kết chú giải công cụ
  Như bạn có thể đã nhận thấy từ danh sách, tôi đang sử dụng bộ tiền xử lý LESS css.
  Chúng tôi đã kết nối trong tập tin riêng biệt Các kiểu và tập lệnh CSS. Chúng tôi cũng có một liên kết và khối div, đây sẽ là nơi chứa chú giải công cụ.
  Đặc tả HTML5 cho phép sử dụng các thuộc tính tùy chỉnh của loại thuộc tính dữ liệu, có thể lưu trữ một số thông tin về một phần tử hoặc khối. Chính trong thuộc tính dữ liệu, chúng ta sẽ lưu văn bản của chú giải công cụ.
  liên kết
  Để lưu trữ, tôi sử dụng thuộc tính data-tooltip.
  Chúng ta đã hoàn tất HTML - chúng ta có thể chuyển sang các kiểu. CSS. Tôi sử dụng thư viện LESS Elements và giới thiệu nó cho mọi người, vì vậy tôi sẽ viết một số thuộc tính bằng cách sử dụng khung này.
  @import "css/elements.less"; #tooltip ( z-index: 9999; vị trí: tuyệt đối; hiển thị: không có; top:0px; left:0px; màu nền: #000; đệm: 5px 10px 5px 10px; màu: trắng; .opacity(0.5); . làm tròn(5px)
  Từ danh sách, rõ ràng là ở dòng đầu tiên chúng ta kết nối LE, đặt khối thành div#tooltip định vị tuyệt đối và giấu nó đi. Tiếp theo chúng ta đặt khối màu nền và màu văn bản, làm tròn các góc (5px) và đặt giá trị trong suốt thành 50%. jQuery Chà, bây giờ là phần thú vị nhất - jQuery.
  $.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 )) .show() )).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "top" : 0, "left" : 0 )); )); ));// Sẵn sàng kết thúc.
  Bây giờ chúng ta thêm vào vùng chọn tất cả các phần tử có thuộc tính data-tooltip và khi di chuột qua yếu tố bắt buộc bằng cách sử dụng chuột, chúng ta nhận được giá trị chú giải công cụ và lưu nó vào một biến. Tiếp theo, thêm văn bản chú giải công cụ vào khối #tooltip, đặt cho nó tọa độ con trỏ từ mép trang + 5 px và cuối cùng hiển thị khối có chú giải công cụ trong ở đúng nơi. Sau khi chuột rời khỏi phần tử, chúng ta ẩn khối #tooltip, xóa nội dung của nó và trả về 0;0;.

  Đó là tất cả!
  Kết quả chúng ta sẽ được như thế này: Demo

  Nhờ đó kịch bản đơn giản tất cả các thành phần trên trang có thuộc tính data-tooltip sẽ nhận được chú giải công cụ.

  Cám ơn vì sự quan tâm của bạn!

  Từ tác giả: xin chào. Chú giải công cụ là một văn bản giải thích nhỏ xuất hiện khi bạn di chuột qua một phần tử, thường là hình ảnh. Hôm nay chúng ta sẽ xem cách bạn có thể tạo chú giải công cụ bằng HTML theo nhiều cách khác nhau.

  Gợi ý chuẩn

  Theo mặc định, thuộc tính tiêu đề có nhiệm vụ hiển thị văn bản giải thích. Nó có thể được chỉ định các yếu tố khác nhau, nhưng thường chỉ được sử dụng cho các hình ảnh để giải thích những gì chúng thể hiện.

  Trong một trong những bài viết trước, tôi đã sử dụng hình ảnh một con hổ để minh họa cách xử lý các kích thước hình ảnh. Nếu bạn không phiền, tôi sẽ sử dụng lại hình ảnh này. Vì vậy, để hiển thị gợi ý, bạn chỉ cần thêm thuộc tính tiêu đề và viết nội dung mong muốn vào đó.

  

  < img src = "tiger.jpg" title = "Đây là một con hổ" >

  Có thể có một từ hoặc nhiều câu. Và đây là những gì nó trông giống như:

  

  Gợi ý xuất hiện mượt mà, không phải ngay sau khi di chuột mà sau một thời gian. Đây là hành vi mặc định.

  Vấn đề chính với chú giải công cụ như vậy là nó không thể được cách điệu hóa. Làm thế nào để quyết định vấn đề này? Chúng ta sẽ phải đưa ra gợi ý theo những cách khác. Bây giờ tôi sẽ cho bạn xem một vài.

  Phương pháp css thuần túy

  Rất cách thú vị, cho phép bạn hiển thị chú giải công cụ cho hình ảnh một cách đẹp mắt. Đánh dấu HTML rất đơn giản, chỉ hình ảnh cần được đặt trong một khối chứa, chúng ta sẽ gán một mã định danh vào đó để sau này chúng ta có thể tham chiếu nó theo các kiểu:

  

  < div id = "tiger" data - name = "Суматранский тигр" > < img src = "tiger.jpg" > < / div >

  Điều duy nhất có thể bạn chưa rõ ở đây là thuộc tính data-name. Vấn đề là đây được gọi là thuộc tính dữ liệu không tự thực hiện bất cứ điều gì, nhưng giá trị của nó có thể được sử dụng trong css và javascript, điều này làm cho nó hữu ích trong một số trường hợp. Bạn sẽ thấy điều này tiếp theo.

  Vì vậy, trước tiên, hãy mô tả các kiểu cho vùng chứa. Chúng tôi cần định vị tương đối vì chúng tôi chắc chắn sẽ định vị khối bằng văn bản giải thích để việc định vị xảy ra liên quan đến khối gốc chứ không phải toàn bộ trang.

  #tiger(vị trí: tương đối; hiển thị: khối nội tuyến; )

  #con hổ( vị trí: tương đối; hiển thị: nội tuyến - khối;

  Hiển thị dòng khối sẽ ngăn khối (và cùng với nó là khối có chú giải công cụ mà chúng ta sẽ tạo) trải dài trên toàn bộ chiều rộng của cửa sổ. Tất cả những gì còn lại là tự tạo gợi ý. Trong CSS, rất thuận tiện để thực hiện việc này bằng cách sử dụng các phần tử giả. Như thế này:

  #tiger:hover:after ( nội dung: attr(data-name); vị trí: tuyệt đối; trái: 0; dưới cùng: 0; nền: rgba(5,13,156,.55); màu: #fff; căn chỉnh văn bản: giữa ; họ phông chữ: chữ thảo; cỡ chữ: 14px; chiều rộng: 100% )

  #tiger:di chuột:sau ( nội dung: attr(dữ liệu - tên); vị trí: tuyệt đối; trái: 0; đáy: 0; nền: rgba(5, 13, 156, . 55); màu : #fff; văn bản - căn chỉnh: giữa; phông chữ - họ : chữ thảo ; cỡ chữ: 14px; phần đệm: 3px 0; chiều rộng: 100%;

  Có rất nhiều mã, nhưng không có gì phức tạp ở đây. Bộ chọn #tiger:hover:after có nghĩa như sau: khi chúng ta di chuột qua một khối có hình ảnh, chúng ta cần tạo phần tử giả after (và xa hơn nữa trong dấu ngoặc nhọn quy tắc được liệt kê). Thuộc tính content: attr(data-name) chỉ định giá trị văn bản khối. Nó sẽ bằng với những gì được ghi trong thuộc tính data-name của khối bao bọc hình ảnh.

  

  Chú giải công cụ này xuất hiện khi bạn di chuột qua hình ảnh, nhưng không giống như tiêu chuẩn, nó thực hiện điều này một cách đột ngột và bản thân giao diện sẽ xuất hiện ngay lập tức tại thời điểm di chuột. Ngoại hình mượt mà trong trong trường hợp này sẽ không thể thực hiện được vì đối với các phần tử giả chuyển tiếp suôn sẻ không được hỗ trợ.

  Phương pháp 2. css thuần túy và vẻ ngoài mịn màng

  Tuy nhiên, bằng cách viết lại mã một chút, bạn có thể đạt được giao diện mượt mà của chú giải công cụ và một lần nữa, không cần sử dụng javascript.

  Để tự mình xem 2 hiệu ứng mà tôi sẽ chỉ cho bạn tiếp theo, tôi khuyên bạn nên mở notepad hoặc bất kỳ trình soạn thảo thuận tiện mã và lặp lại mọi thứ theo tôi. Đúng, để làm được điều này, bạn vẫn cần bao gồm tệp kiểu, mặc dù kiểu cũng có thể được viết bằng html trong thẻ

  Vì vậy, mã cho ví dụ này sẽ khác một chút và đó là vì chúng ta sẽ không sử dụng phần tử giả. Chính vì điều này mà không thể áp dụng được thay đổi suôn sẻ. Lần này mã sẽ trông như thế này:

  hổ Sumatra

  < div id = "tiger2" > < img src = "tiger.jpg" > < div class = "text" >hổ Sumatra< / div > < / div >

  Mã CSS chưa trải qua bất kỳ thay đổi lớn nào:

  #tiger2( vị trí: tương đối; hiển thị: khối nội tuyến; ) #tiger2 .text ( chuyển tiếp: tất cả 0,6 giây; độ mờ: 0; vị trí: tuyệt đối; trái: 0; dưới cùng: 0; nền: rgba(5,13,156,. 55); màu: #fff; họ phông chữ: chữ thảo; phần đệm: 3px 0; biến đổi: tỷ lệ (0);

  #hổ2( vị trí: tương đối; hiển thị: nội tuyến - khối; #tiger2 .text ( chuyển tiếp: tất cả 0,6 giây; biến đổi:tỷ lệ(0); #tiger2:hover.text( độ mờ: 1;

  Chúng tôi chỉ xóa thuộc tính nội dung vì nó chỉ được hỗ trợ bởi các phần tử giả. Chúng tôi thêm thuộc tính transition để tạo ra sự chuyển tiếp trạng thái mượt mà. Chà, độ mờ: 0 sẽ mang lại độ trong suốt hoàn toàn cho khối chú giải công cụ của chúng tôi, vì vậy nó sẽ không hiển thị trên trang.

  Khi di chuột qua một khối, giờ đây chỉ cần trả lại độ trong suốt bình thường cho khối bằng một chú giải công cụ là đủ. Sẵn sàng. Bạn có thể kiểm tra xem phần tử có xuất hiện trơn tru hay không.

  Sử dụng css3 bạn có thể ẩn một phần tử theo cách khác. Sử dụng các phép biến đổi chẳng hạn. Thay thế độ trong suốt hoàn toàn bằng thuộc tính này: Transform:scale(0) và kích thước khối sẽ giảm xuống 0, vì vậy nó sẽ không hiển thị trên màn hình. Khi bạn di chuột qua khối có hình ảnh, bạn nên quay lại kích thước bình thường như thế này: biến đổi: tỷ lệ (1). Trong trường hợp này, hiệu ứng xuất hiện sẽ còn đẹp hơn nữa. Bạn có thể thấy điều này cho chính mình.

  Như bạn có thể thấy, trên css chú giải công cụ cũng có thể xuất hiện chậm với hiệu ứng đẹp.

  Các phương pháp khác

  jQuery có thể cung cấp cho bạn nhiều khả năng hơn nữa. Bằng cách sử dụng thư viện này, bạn có thể tự viết mã để hiển thị gợi ý hoặc tìm một số plugin đã triển khai tính năng này.

  Ví dụ, trong Khung khởi động Ngoài ra còn có nhiều thành phần làm sẵn và một trong số đó chỉ là chú giải công cụ. Bạn có thể xem tài liệu về khung để biết các ví dụ về mã cho phép bạn tạo các gợi ý tương tự và sử dụng chúng. Không cần thiết phải kết nối toàn bộ Bootstrap; bạn thường chỉ có thể để lại một thành phần như chú giải công cụ, chỉ tải xuống và kết nối thành phần đó.

  Nói chung, hôm nay tôi đã hướng dẫn bạn các cách trong CSS để tạo ra một chú giải công cụ đẹp mắt với vẻ ngoài sắc nét và mượt mà. Ngoài ra, bạn còn có Bootstrap và jQuery trong kho vũ khí của mình. Chọn bất kỳ thứ gì và triển khai các mẹo thú vị và đẹp mắt trên trang web của bạn!

  Trong bài viết này, tôi muốn thảo luận về một số tùy chọn để tổ chức tính năng như vậy trong bất kỳ bố cục nào. Nhân tiện, tôi đã có một ví dụ sống động về việc triển khai như vậy trên trang web của mình. Nếu bạn cuộn xuống các bình luận trên trang này và di chuột qua ngày bình luận, nó sẽ ngay lập tức hiển thị rõ ràng chính xác những gì đang được nói. Chà, nếu chưa có bình luận nào, bạn có thể để lại một bình luận cùng một lúc.

  Tôi thấy có hai phương pháp chính để triển khai chú giải công cụ, đây là khi di chuột, đây cũng là phương pháp phổ biến nhất và ít phổ biến hơn khi bạn nhấp vào một phần tử. Hãy bắt đầu một cách tự nhiên với sự xuất hiện của chú giải công cụ khi bạn di chuột qua một phần tử.

  Trong bài viết này, tôi nghĩ mình sẽ bắt đầu với thứ nguyên thủy nhất, hiển thị chú giải công cụ bằng cách sử dụng title , không thể định dạng theo bất kỳ cách nào, nhưng tôi nghĩ bạn có thể bỏ qua nó, vì nó đã rõ ràng. Nếu những điều trên vẫn chưa hoàn toàn rõ ràng với bạn, tôi nghĩ rằng sau khi nghiên cứu video, mọi thứ sẽ trở nên rõ ràng hơn nhiều.

  Một cách đơn giản với thiết kế, trên di chuột.

  Nó không phức tạp hơn phương pháp tôi đã bỏ lỡ. Chỉ thay vì thuộc tính tiêu đề Tôi sẽ sử dụng tiêu đề dữ liệu và thiết kế với phong cách css. Trên thực tế, tôi đưa ra mã html bên dưới:

  ?

  /* Chúng tôi sử dụng phần tử giả after để tự thiết kế thanh, nhưng đồng thời chúng tôi ẩn nó đi, vì nó chỉ xuất hiện khi di chuột */ .hover:after (content: attr(data-title); display: none ;vị trí: tuyệt đối; dưới cùng: 130%; bên trái: 0px; màu nền: #fff; phần đệm: 5px; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16) ; box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;) / * Thêm thuộc tính để khi bạn di chuột qua một phần tử, một hộp gợi ý sẽ xuất hiện */ .hover:hover:after(display: block;)

  Ở đây tôi muốn bạn chú ý rằng đây chỉ là một ví dụ về các đặc tính thiết kế. Bạn có thể thiết kế một cách tự nhiên vẻ bề ngoài chết, như bạn mong muốn.

  Chú giải công cụ khi di chuột.

  Đây có lẽ là nhất cách phổ biến việc thực hiện cơ hội này. Qua ít nhất Tôi sử dụng nó thường xuyên nhất.

  ? đây là một mẹo thiết kế

  TRONG trong ví dụ này Mình cũng không thấy có gì đặc biệt nhưng hơn thế nữa, nhưng kết quả sẽ tốt hơn ngay cả khi không sử dụng thuộc tính data-title. Vùng chứa trong trường hợp này đóng vai trò là trình bao bọc cho các phần tử của chúng tôi sẽ được sử dụng để triển khai chú giải công cụ. Và bản thân khuôn cũng sẽ được định vị so với vật chứa.

  /* bộ định vị tương đối container */ .block(position:relative;) /* Thiết kế yếu tố ẩn mặc định */ .hidden (hiển thị: không có; vị trí: tuyệt đối; dưới cùng: 130%; bên trái: 0px; màu nền: #fff; màu: #3aaeda; phần đệm: 5px; căn chỉnh văn bản: giữa; -moz-box - bóng: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); bóng hộp: 0 1px 1px rgba(0 , 0,0,.16); font-size: 12px;) /* Trang trí bổ sung cho phần tử ẩn (tùy chọn) */ .hover + .hidden:Before (nội dung: " "; vị trí: tuyệt đối; top: 98%; left : 10%; lề trái: -5px; border-style: Solid: 0; border-right: 7px Solid: #fff trong suốt trong suốt z-index: 2;) /* Trang trí bổ sung cho phần tử ẩn (tùy chọn) ) */ .hover + .hidden:after (nội dung: " "; vị trí: tuyệt đối; trên cùng: 100%; trái: 10% ; lề trái: -5px; kiểu viền: liền khối; chiều rộng: 0; viền-phải : 7px, ,0,0,.16) trong suốt trong suốt; z-index: 1;) /* Xuất hiện của một phần tử ẩn khi di chuột */ .hover:hover + .hidden(display: block;)

  Hai tùy chọn này có thể được sử dụng trên trang web của bạn để hiển thị chú giải công cụ khi bạn di con trỏ.

  Có hai phương pháp nữa nhưng chúng gần như giống hệt nhau, ngoại trừ phần tử sẽ xuất hiện khi bạn nhấp vào phần tử luôn hiển thị trên trang web.

  Một cách đơn giản với việc đăng ký, chỉ bằng một cú nhấp chuột.

  Trong trường hợp nhấp chuột, mã sẽ trông giống hệt nhau. Điều duy nhất là để thuận tiện, tôi đã thay thế lớp của một số phần tử. Lớp giả tiêu điểm cũng được sử dụng thay vì di chuột. Điều đáng lưu ý ở đây là để phương pháp nàyđã hoạt động, bạn cần thay thế nó bằng , tức là bằng một siêu liên kết.

  ?

  Mã CSS trong trường hợp này tương tự như sự xuất hiện của một khối khi di chuột, chỉ các lớp khác được sử dụng để thuận tiện. Va cho vận hành chính xác thay đổi lớp giả thành focus .

  /* Chúng tôi sử dụng lớp giả after để tự thiết kế vị trí đó, nhưng đồng thời chúng tôi ẩn nó đi, vì nó chỉ xuất hiện khi được nhấp vào */ .focus:after (content: attr(data-title); display: none ; vị trí: tuyệt đối; dưới cùng: 130%; bên trái: 0px; màu nền: #fff; phần đệm: 5px; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16) box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;) / * Thêm thuộc tính để khi bạn bấm vào một phần tử, một hộp gợi ý sẽ xuất hiện */ .focus:focus:after(display: block;)

  Như bạn có thể thấy, thực tế không có sự khác biệt.

  Chú giải công cụ khi được nhấp vào.

  Phương pháp nhấp chuột này cũng sẽ phù hợp hơn nếu bạn cần định dạng chú giải công cụ tốt hơn một chút so với tùy chọn trước đó.

  ? đây là một mẹo thiết kế

  Và thiết kế thực tế của khuôn:

  /* đặt vị trí tương đối cho vùng chứa */ .block(position:relative;) /* Thiết kế phần tử ẩn mặc định */ .hidden (display: none; location: tuyệt đối; dưới cùng: 130%; left: 0px; màu nền : # fff; màu: #3aaeda; căn chỉnh văn bản: giữa; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); Shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) /* Trang trí bổ sung cho phần tử ẩn (tùy chọn) */ .focus + .hidden:Before (nội dung: " "; vị trí: tuyệt đối; trên cùng: 98%; lề trái: -5px; chiều rộng đường viền: 5px; kiểu đường viền: liền khối; chiều rộng: 0; : 7px Solid #fff; border-color: #fff trong suốt trong suốt; z-index: 2;) /* Trang trí bổ sung cho phần tử ẩn (tùy chọn) */ .focus + .hidden :after (nội dung: " "; vị trí: tuyệt đối; trên cùng: 100%; bên trái: 10%; lề trái: -5px; chiều rộng đường viền: 5px; kiểu đường viền: chiều rộng: 0; đường viền: 7px trong suốt; đường viền bên phải: 7px liền khối #fff; màu viền: rgba(0,0,0,.16) trong suốt trong suốt trong suốt; z-index: 1;) /* Xuất hiện của một phần tử ẩn khi được nhấp vào */ .focus:focus + .hidden(display: block;)

  Như bạn có thể thấy, không có gì phức tạp. Ngoài ra, bạn có thể sắp xếp các thay đổi trạng thái bằng cách di chuột và nhấp chuột. Mặc dù, thành thật mà nói, tôi không thể nói phương pháp nhấp để nhấp có liên quan như thế nào.

  Ngoài ra còn có một ví dụ bắt chước ví dụ cuối cùng sử dụng , nhưng đối với tôi, việc sử dụng nó dường như không hoàn toàn chính xác, đặc biệt là để tổ chức chú giải công cụ trên trang web của bạn. Nếu bạn hoàn toàn không đồng ý với tôi, vui lòng nhận xét.

  Video bài học - Tooltip không có script.

  Đó là tất cả đối với tôi. Chúc mọi người may mắn.