Chú giải công cụ HTML khi di chuột qua hình ảnh. Cách tạo chú giải công cụ đơn giản trong CSS3

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ạ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ụ trên CSS thuần túy, Tôi đã tìm thấ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, vui lòng tham khảo 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!

Xin chào các bạn thân mến. Một ngày nọ, một trong những khách hàng của tôi đã đến gặp tôi với yêu cầu cải thiện trang web của anh ấy. Hay đúng hơn là làm đồng phục mới các ứng dụng trên trang web, bởi vì đồng phục cũđã thay đổi.

Anh ấy cũng yêu cầu đính kèm chú giải công cụ vào từng trường biểu mẫu. Có thể bạn đã từng thấy những gợi ý như vậy: khi bạn di chuyển con trỏ chuột lên một hình ảnh hoặc một từ, một chú giải công cụ sẽ xuất hiện.

Tất nhiên, có rất nhiều lựa chọn để thực hiện những lời khuyên như vậy. Đương nhiên, để tập trung vào việc giảm thiểu tải cho máy chủ, tôi quyết định tạo chú giải công cụ với sử dụng HTML và CSS. Việc này khá đơn giản và hoàn toàn không tải máy chủ.

Và loại gợi ý như vậy chỉ phụ thuộc vào kỹ năng và trí tưởng tượng của bạn. Trong biểu mẫu khách hàng, tôi đã triển khai điều này dưới dạng hình ảnh có dấu chấm hỏi bên cạnh trường nhập liệu, di con trỏ qua đó chú giải công cụ sẽ xuất hiện.

Ví dụ về triển khai chú giải công cụ

Cách tạo chú giải công cụ

Vì vậy, toàn bộ quá trình sẽ đưa bạn không quá 5 phút. Đầu tiên bạn cần quyết định đối tượng thu hút sự chú ý sẽ trông như thế nào. Nghĩa là, nó có thể là một hình ảnh. Đây là hình dáng của một chú giải công cụ đơn giản, được tạo bằng. sử dụng CSS phong cách. Và gắn liền với hình ảnh. hoặc .

Để đính kèm chú giải công cụ vào hình ảnh, trước tiên hình ảnh phải được tải lên trang web của bạn. Tôi nghĩ không có ích gì khi cứ mãi nghĩ về điều này. Tiếp theo, tại nơi bạn muốn hiển thị hình ảnh này và chú giải công cụ, hãy chèn mã này:

LIÊN KẾT HÌNH ẢNH " alt="hint" />ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ !}

Nếu đây là một từ hoặc cụm từ thì bạn cần chèn mã này vào vị trí bạn muốn hiển thị gợi ý.

VĂN BẢN MẸO CÔNG CỤ WORD

Bây giờ bạn cần chèn kiểu vào bảng của mình Kiểu CSS, trong hầu hết các trường hợp đây là tệp style.css.

Khai mạc bảng điều hành WP-" Vẻ bề ngoài" - "Trình chỉnh sửa" - "Biểu định kiểu" và chèn các kiểu này vào cuối.

Trợ giúp ( color: #2C8505; phác thảo: không có; /*help color*/ con trỏ: trợ giúp; trang trí văn bản: không có; /*hình dạng con trỏ khi di chuột, có thể được thay thế bằng con trỏ*/ vị trí: tương đối; /*position*/ ) /*tooltip location*/ .help span ( lề trái: -999em; vị trí: tuyệt đối; ) /*hover tooltip*/ .help:hover span ( font-family: Verdana, Tahoma, Geneva, sans-serif ; / *phông chữ*/ vị trí: tuyệt đối; /*position*/ top: 25px; lề trái: 0; chiều rộng: 200px; hình ảnh*/ .help:hover img ( border: 0; ) /*tooltip block*/ .airhelp ( nền: không lặp lại cuộn 0 0 rgba(97, 177, 255, 0.9); /*màu nền và độ trong suốt*/ đường viền: 1px Solid #2b82b8; /*thông số đường viền*/ bán kính đường viền: 5px; / box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); : #fff; /*màu phông chữ chú giải công cụ*/ đệm: 5px /* phần đệm*/ }

Như bạn có thể thấy, tôi đã đưa ra lời khuyên cho bạn. Tất cả những gì bạn phải làm là thực hiện các thay đổi cho phù hợp với thiết kế của mình và bạn có thể tận hưởng các chú giải công cụ. Và nếu khách truy cập của bạn phải điền thông tin gì đó, đăng ký trên trang web hoặc thực hiện một số hành động, thì bạn chỉ cần gợi ý. Và khách truy cập của bạn sẽ rất biết ơn bạn.

Những lời khuyên là một cách tuyệt vờiđể hiển thị thông tin bổ sung bằng cách di chuột qua văn bản hoặc hình ảnh. Ví dụ: chúng có thể được sử dụng để hiển thị tên ảnh, mô tả liên kết hoặc bất kỳ thông tin nào khác có thể hữu ích cho người dùng tài nguyên của bạn. Và không cần phải phá vỡ mẫu thiết kế.

TRONG bài học này chúng ta sẽ xem xét cách tạo các mẹo đơn giản sử dụng HTML và CSS sẽ xuất nội dung thuộc tính tiêu đềđể tham khảo.

Liên kết đến tài nguyên hữu ích

Hãy thiết lập kiểu cơ bản cho lớp chú giải công cụ:

Chú giải công cụ(hiển thị: nội tuyến; vị trí: tương đối; )

Bây giờ chú giải công cụ sẽ được hiển thị trên một dòng có liên kết bằng cách sử dụng định vị tương đối. Bây giờ hãy xác định góc tròn cho khối chú giải công cụ và đặt nó ở đầu liên kết:

Chú giải công cụ:hover:after( nền: #333; nền: rgba(0,0,0,.8); bán kính đường viền: 5px; đáy: 26px; màu: #fff; nội dung: attr(title); trái: 20 %; phần đệm: 5px 15px; chỉ số z: 98;

Chúng tôi sử dụng lớp giả :hover để chọn một phần tử khi chuột di chuột qua nó và lớp giả :after để thêm nội dung sau phần tử được chọn. Nền được đặt thành trong suốt một phần và dành cho các trình duyệt không hỗ trợ định dạng Màu RGBA, cài đặt màu xám lý lịch.

Các góc tròn được tạo bằng thuộc tính bán kính đường viền. Đặt màu văn bản thành màu trắng. Cuối cùng, chúng tôi định vị khối chú giải công cụ và thêm phần đệm.

Ngoài việc xác định kiểu và vị trí, chúng tôi còn đặt thuộc tính nội dung:

Nội dung: attr(tiêu đề);

Thuộc tính này cho phép bạn chèn nội dung, có thể là thuộc tính chuỗi hoặc phần tử. TRONG trong trường hợp này Chúng tôi sử dụng thuộc tính tiêu đề của liên kết.

Liên kết đến tài nguyên hữu ích

Để hoàn thành, bạn cần thêm mũi tên ở cuối chú giải công cụ. Chúng tôi sử dụng lớp giả: trước và kiểu cho khung:

Chú giải công cụ:hover:trước( border: Solid; border-color: #333 Transparent; border-width: 6px 6px 0 6px; Bottom: 20px; content: ""; left: 50%; location: tuyệt đối; z-index: 99 ; )

Để tạo mũi tên, chúng tôi đã sử dụng thủ thuật viền: đặt màu của đường viền trái và phải thành trong suốt và kiểm soát độ rộng của đường viền. Mũi tên cũng được định vị dưới chú giải công cụ.

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 bằ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ụ.

Thiết lập tài liệu

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 trông giống nhau trong tất cả các trình duyệt. không giống thiết lập lại tiêu chuẩn CSS Normalize.css không loại bỏ 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: