BBCode [TIP]

**Kaldorei** · 06-01-2015, 20:20

I- Cú pháp cơ bản:

[tip=tooltip|]box BBCode[tip=tip tip-right|]Nơi đào tạo các BBCoder làm đẹp cho forum[/tip][/tip]

- 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.
- 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

[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]

- Để ý 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:

[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]

- 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)

[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]

- Để 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.

[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 ý: 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.
- 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:

Welcome to
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]

+ phần nội dung có thể dùng bbcode thoải mái, vd:

[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:

Nội dung

[box=url('http://vnsharing.site/forum/images/img/alticon.png') no-repeat; padding-left:16px||||]Nội dung[/box]

Vậy nếu bạn muốn icon khác thì cứ thay vào phần background, vd:

[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]

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.
Ví dụ như cái

- 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

[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]

- trong 1 tooltip, có thể có nhiều tip:

[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]

- có thể sử dụng khung tip như 1 tooltip (hover vào đó lại hiện ra 1 khung tip mới)

[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

**Snake ♥ Fox** · 06-01-2015, 20:25

Điện về thôn rồi bà con ơi,

cơ mà cái tip cuối vẫn làm mình thấy hãi như ngày nào

**Nhật Minh Sang** · 06-01-2015, 20:31

Phải dành thời gian vọc dần mới được

**HitomaruKonpaku** · 06-01-2015, 20:35

Điện về

Thanks Kal

**Ciela** · 06-01-2015, 20:36

Rất bá đạo cho một bbcode

**hoangkhung1996** · 06-01-2015, 20:37

cái này biến tấu 1 chút chắc thay hover 1 số tình huống được nhỉ

**Tham Lam** · 06-01-2015, 20:45

**Scheherazade** · 06-01-2015, 21:03

đọc xong hướng dẫn muốn khóc

.
.
.
.
.
.
.
.
.
vấn đề muốn hỏi là: sao phần nội dung vẫn bị tràn ra ngoài k tip? tưởng dài đến đâu kéo đến đấy?

muốn xóa cái mũi tên nhưng giữ lại border 4 bên thì làm thế nào? hoặc di chuyển cái mũi tên đấy thay vì vào giữa khung tip

chỉ mình cách hover đc nội dung trong tooltip