I- Cú pháp cơ bản:
- Trong tut này, quy ước gọi phần mình hover vào là tooltip, phần hiện thêm ra là tip.box BBCodeNơi đào tạo các BBCoder làm đẹp cho forum
[tip=tooltip|]box BBCode[tip=tip tip-right|]Nơi đào tạo các BBCoder làm đẹp cho forum[/tip][/tip]
- Có thể thay tip-right trong cú pháp trên bằng tip-top, tip-bottom, tip-left.
- Phần tip ko đặt width mặc định, mà dùng white-space:nowrap, nghĩa là bạn viết 1 dòng dài thì tip sẽ dài, viết dòng ngắn (vd: enter sớm) thì tip ngắn. Tớ nghĩ tốt nhất mỗi người tự đặt width phù hợp, và dùng white-space:normal
- Để ý chỗ bạn vừa điền width, đó là chỗ viết style cho tip, vd bạn muốn thay đổi màu chữ, màu nền:box BBCodeNơi đào tạo các BBCoder làm đẹp cho forum
[tip=tooltip|]box BBCode[tip=tip tip-right|width:200px; white-space:normal]Nơi đào tạo các BBCoder làm đẹp cho forum[/tip][/tip]
- Nhưng dấu mũi tên vẫn bị màu đỏ son kìa? Đổi màu cho nó bằng border-right-color (với tip-right, tương tự với 3 phía còn lại)box BBCodeNơi đào tạo các BBCoder làm đẹp cho forum
[tip=tooltip|]box BBCode[tip=tip tip-right|width:200px; white-space:normal; color:crimson; background:pink]Nơi đào tạo các BBCoder làm đẹp cho forum[/tip][/tip]
- Để code tip hiện ra mượt hơn, hãy thêm display:inline. Chú ý: nhớ test lại khi dùng, vì đôi khi thêm cái này sẽ ảnh hưởng bố cục xung quanh.box BBCodeNơi đào tạo các BBCoder làm đẹp cho forum
[tip=tooltip|]box BBCode[tip=tip tip-right|width:200px; white-space:normal; color:crimson; background:pink; border-right-color:pink]Nơi đào tạo các BBCoder làm đẹp cho forum[/tip][/tip]
- Lưu ý: Nội dung tip có thể bị hụt mất nếu hiển thị bên ngoài post, vd ở đầu bài mà dùng tip-top hoặc cuối bài mà tip-bottom là bị hụt ngay. Cái này thì dễ tránh, nhưng tip-left, tip-right thì rất dễ bị hụt sang 2 bên trái/phải. Kể cả khi bạn kiểm tra trên màn hình mình đã ổn, nhưng có thể cỡ màn hình khác vẫn hụt. Code tip cũ tự biết chọn chỗ mà hiển thị, còn tip mới bị vấn đề như trên là vì tip mới thuần css, ko dùng js hỗ trợ (theo y/c của boss trên). Vì vậy, hãy coi tip là thứ bổ sung, làm rõ nghĩa nội dung chính, đừng đặt nội dung quan trọng trong này. Tham khảo thêm topic hướng dẫn trình bày bài viết hiển thị tốt trên nhiều cỡ màn hình.box BBCodeNơi đào tạo các BBCoder làm đẹp cho forum
[tip=tooltip|]box BBCode[tip=tip tip-right|display:inline]Nơi đào tạo các BBCoder làm đẹp cho forum[/tip][/tip]
- Lưu ý 2: Nếu khung tip bị các tooltip bên dưới đè lên, thêm z-index:2 vào style khung tip.
II- Phân tích cú pháp:
- Phân tích các vd trên sẽ thấy "code TIP" thực chất gồm...2 code TIP lồng vào nhau, với cú pháp là: [tip=A|B]Nội dung[/tip] trong đó:
+ code tip lớn bọc ngoài có A là tooltip
+ code tip nhỏ bên trong có A là tip tip-right hoặc tip tip-left hoặc tip tip-top hoặc tip tip-bottom
+ phần B của code tip nhỏ cho phép viết các style của khung tip, ví dụ màu chữ, màu nền.....
+ tương tự, phần B của code tip lớn cũng cho phép viết style của phần tooltip (cái mà mình hover chuột vào ấy). vd:
+ phần nội dung có thể dùng bbcode thoải mái, vd:Welcome to box BBCodeNơi đào tạo các BBCoder làm đẹp cho forum
Welcome to [tip=tooltip|color:green]box BBCode[tip=tip tip-right|]Nơi đào tạo các BBCoder làm đẹp cho forum[/tip][/tip]
Dùng bbcode thoải mái.Ở đây cũng dùng bbcode thoải mái.
aa
bb
cc
dd
[tip=tooltip|][table2=!rules=all !border:1px solid]
|-
|aa
|bb
|-
|cc
|dd
[/table2] Dùng bbcode thoải mái.[tip=tip tip-right|]Ở đây cũng dùng [B]bbcode[/B] thoải mái.[/tip][/tip]III- Sử dụng nâng cao:
Vậy có thể hình dung cấu trúc code tip giống 2 lớp box, khi box ngoài được hover, thì box trong hiện ra. Vận dụng những style vẫn hay dùng cho box, ta có thể tùy biến thêm 1 số thứ sau:
- thay đổi màu sắc, kích thước....
- thay biểu tượng:
biểu tượng này là background của tip bên ngoài, có thể hiểu nôm na tip bên ngoài thế này:
Vậy nếu bạn muốn icon khác thì cứ thay vào phần background, vd:Nội dung[box=url('http://vnsharing.site/forum/images/img/alticon.png') no-repeat; padding-left:16px||||]Nội dung[/box]
Lưu ý, cân nhắc kỹ khi thay đổi, vì icon gọn, mà mang tính ký hiệu cao, mem vns nhìn là biết ngay "chỗ đó có 1 cái tip, cần chỉ chuột vào". Thay bằng ký hiệu khác rất có thể người khác sẽ ko biết mà chỉ chuột vào.box BBCodeNơi đào tạo các BBCoder làm đẹp cho forum[tip=tooltip|background:url('http://vnsharing.site/forum/images/icons/icon1.png') no-repeat; background-position:right; padding:0 20px 0 0;]box BBCode[tip=tip tip-right|display:inline]Nơi đào tạo các BBCoder làm đẹp cho forum[/tip][/tip]
Ví dụ như cái này1 cái tip khó tìm
- tương tự, thay biểu tượng chuột khi hover vào. Xem thêm các loại cursor ở đây: http://www.w3schools.com/cssref/play...preval=zoom-in
- trong 1 tooltip, có thể có nhiều tip:box BBCodeCái cursor này dễ gây ức chế lắm đấy
[tip=tooltip|cursor:wait]box BBCode[tip=tip tip-right|width:300px]Cái cursor này dễ gây ức chế lắm đấy :th_46:[/tip][/tip]
box BBCodeTopRightBottomLeft
[tip=tooltip|]box BBCode[tip=tip tip-top|]Top[/tip][tip=tip tip-right|]Right[/tip][tip=tip tip-bottom|]Bottom[/tip][tip=tip tip-left|]Left[/tip][/tip]- có thể sử dụng khung tip như 1 tooltip (hover vào đó lại hiện ra 1 khung tip mới)box BBCodeTopRightBottomLeft
[tip=tooltip|]box BBCode[tip=tip tip-top|display:inline; transition-delay:0s]Top[/tip][tip=tip tip-right|display:inline; transition-delay:0.2s]Right[/tip][tip=tip tip-bottom|display:inline; transition-delay:0.4s]Bottom[/tip][tip=tip tip-left|display:inline; transition-delay:0.6s]Left[/tip][/tip]
box BBCodeTip level 1Tip level 2
[tip=tooltip|]box BBCode[tip=tooltip tip tip-right|]Tip level 1[tip=tip tip-top|]Tip level 2[/tip][/tip][/tip]Gửi bởi Claerwen Yukari
Đánh dấu