Thêm nhãn Tooltip hình ảnh đơn giản với Taggd

Bạn biết Facebook cho phép bạn như thế nào mặt nhãn trong ảnh? Tốt, Taggd tương tự như CSS / JS sử dụng dấu chấm để ghi chú nơi chú giải công cụ sẽ xuất hiện trên một hình ảnh.

Thư viện hoàn toàn miễn phí, và không yêu cầu bất kỳ sự phụ thuộc chẳng hạn như jQuery. Nó chạy trên JavaScript vanilla thuần túy, và nó rất dễ cài đặt.

Bạn có thể tìm hiểu thêm một chút từ trang chủ Taggd bao gồm một bản demo và một số bước cơ bản để bắt đầu.

Ngoài ra còn có một liên kết đến tài liệu trực tuyến bằng cách sử dụng Doclets, một ứng dụng web nhỏ gọn được tạo cho tài liệu JS. Bạn có thể tìm kiếm phiên bản Taggd, hoặc là duyệt phiên bản hiện tại trong nhánh chính.

Từ đó, bạn sẽ nhận được một danh sách tài sản khổng lồ bạn có thể dùng. Mỗi tài liệu được phân chia bởi các chức năng hoạt động trên hình ảnh (nhu la thêm thẻ() hoặc là getTag ()) theo sau là các chức năng giúp bạn thao tác các thẻ cụ thể (nhu la đặt vị trí()).

Một lần nữa, tất cả mọi thứ chạy trên JavaScript vanilla vì vậy bạn không cần phải lo lắng về các vấn đề cú pháp.

Để bắt đầu kiểm tra repo GitHub, và làm theo hướng dẫn thiết lập.

Bạn chỉ cần thêm các tệp Taggd CSS và JS vào của bạn phần , và sau đó tạo một ví dụ mới của các yếu tố Taggd. Đây có thể được xác định từng cái một hoặc là trong một mảng.

Sau đó nối chúng vào một hình ảnh, và uy tín! Bạn đã sẵn sàng để đi.

tôi rất thích nhìn thấy tính năng bổ sung để tùy chỉnh nhãn thẻ, và thay đổi hình dạng của chúng. Thật tuyệt vời khi tạo một thẻ vuông để bao quanh một đối tượng thay vì một chấm nhỏ màu hồng. Nhưng đối với một thư viện miễn phí không phụ thuộc, tôi không thể phàn nàn nhiều.

Cho đến nay thư viện này được thực hiện chỉ dành cho trình duyệt hiện đại, và không hỗ trợ sự xuống cấp duyên dáng. Tuy nhiên, bạn luôn có thể mở một vấn đề trên trang repo hoặc cố gắng giải quyết các vấn đề khác nếu bạn thấy bất kỳ vấn đề đơn giản nào. Tuy nhiên, Taggd vẫn là một plugin của plugin và nó thực tế để sử dụng cho bất kỳ dự án nào.

Kiểm tra trang chủ của tác giả cho mã mẫu và Liên kết DL cùng với một liên kết đến trang tài liệu.

Và nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy nhắn tin cho người sáng tạo Tim Severien trên Twitter của mình @TimSeverien.