Thêm ' ToolTip ' để bài viết sinh động hơn

Được đăng bởi Văn Khương 4 nhận xét

ToolTip ( Chú thích) là một tiện ích thú vị giúp bài viết của Bạn trở nên chất lượng và cụ thể hơn với các đoạn chú thích đặc biệt, hiển thị khi người đọc rê chuột lên đối tượng.

DEMO

Không chỉ  là những đoạn văn bản đơn thuần,ToolTip còn cho phép đoạn chú thích thêm sinh động hơn với các hình ảnh hay đoạn mã HTML...vượt trội hơn hẳn với các tiện ích tương tự.

1. Chèn đoạn script sau trước thẻ </head>

<script src='http://iamtao-chiase.googlecode.com/files/mootools.js' type='text/javascript'/>
<script src='http://iamtao-chiase.googlecode.com/files/tooltip.js' type='text/javascript'/>

2.Chèn đoạn CSS trước thẻ ]]</b:skin>

/*
 CHU THICH CHO BLOGGER
 nguon:http://yootheme.com
 Chia se: http://IamTao.info
 */

div.yoo-tooltip-toggler {
 cursor: pointer;}
div.yoo-tooltip div.default .tooltip-tl {
 background: url(https://lh3.googleusercontent.com/-_bUlks8ZpoY/T0ejKdG3hxI/AAAAAAAAAro/x_OBWVPAxFk/s15/bubble_tl.png) 0 0 no-repeat;
 position: relative;
}
div.yoo-tooltip div.default .tooltip-tr {
 padding: 0px 15px 0px 15px;
 background: url(https://lh4.googleusercontent.com/-C467vKDk8Kw/T0ejTGXy1oI/AAAAAAAAArw/_CkKZ9C7OTE/s15/bubble_tr.png) 100% 0 no-repeat;}
div.yoo-tooltip div.default .tooltip-t {
 background: url(https://lh6.googleusercontent.com/-cqG7-GRk0VI/T0ejZfzFPPI/AAAAAAAAAr4/8Sy6xtXBQ-8/s15/bubble_t.png) 0 0 repeat-x;}
div.yoo-tooltip div.default .tooltip-l {
 background: url(https://lh6.googleusercontent.com/-OP3OEKmpgzE/T0ekLFud_MI/AAAAAAAAAsE/dxQer0uwbfk/s15/bubble_l.png) 0 0 repeat-y;}
div.yoo-tooltip div.default .tooltip-r {
 padding: 0px 15px 0px 15px;
 background: url(https://lh5.googleusercontent.com/-Z_ovY-nFrhg/T0ekTBGQXDI/AAAAAAAAAsM/x__fGLluIQc/s15/bubble_r.png) 100% 0 repeat-y;
}
div.yoo-tooltip div.default .tooltip-m {
 background: #ffffff;
 overflow: hidden;}
div.yoo-tooltip div.default .tooltip-bl {
 background: url(https://lh5.googleusercontent.com/-N8_9cRFn--o/T0ekaSRlqvI/AAAAAAAAAsU/nAXsjh4md-M/s15/bubble_bl.png) 0 0 no-repeat;}
div.yoo-tooltip div.default .tooltip-br {
 padding: 0px 15px 0px 15px;
 background: url(https://lh6.googleusercontent.com/-wLWU4yG7hLY/T0ekgOgyc3I/AAAAAAAAAsc/KALONRUeQSg/s15/bubble_br.png) 100% 0 no-repeat;}
div.yoo-tooltip div.default .tooltip-b {
 background: url(https://lh4.googleusercontent.com/-NaCe9kAK4H8/T0ekmJHm1JI/AAAAAAAAAsk/5WVbAf0FbCY/s15/bubble_b.png) 0 0 repeat-x;}
div.yoo-tooltip div.default .tooltip-arrow {
 background: url(https://lh6.googleusercontent.com/-coqqBrsOBPg/T0emxb_FYyI/AAAAAAAAAs4/m7uNgTlBZqo/h120/bubble_arrow.png) 50% 0 no-repeat;}
div.yoo-tooltip div.default .tooltip-close {
 position: absolute;
 top: 8px;
 right: 10px;
 width: 16px;
 height: 16px;
 background: url(https://lh6.googleusercontent.com/-ZV6dSOieHpE/T0eml7TetmI/AAAAAAAAAsw/EaiAoBdVMro/s16/close.png) 0 0 no-repeat;
 cursor: pointer;}

3. Và đây là đoạn mã html cho tiện ích:

ToolTip cho hình ảnh(Thêm nút đóng)

<div class="tooltip-toggler" id="tooltip-1">
<img src="LINK HINH ANH" />.</div>
<script type="text/javascript">
new ToolTip('tooltip-1', 'ĐOẠN CHÚ  THÍCH', { mode: 'cursor', display: 'block', width: 250, style: 'default', sticky: 1 });

ToolTip cho phép hiển thị hình ảnh:

<div class="tooltip-toggler" id="tooltip-4">
Di chuột vào đây!</div>
<script type="text/javascript">
new ToolTip('tooltip-4', '<img style="margin: 20px 0px 0px 40px;" width="" height="" align="center" title="ToolTip!" alt="ToolTip!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd_dmnVGz0pIiTHmd1fNf0ysmKXavz9TAxS9q_M-XRvHdb2H0F1_v8mkPlJz93JHBB1xdRjN1-OwbXQr3EzWS2N5uNX9d15iBGzIcR0ZiPIvFFPdI1NoEr7leJVhILBUhdcyUjZlLA1ps/h80/logo.png" /><br/>Bạn cũng có thể thêm chú thích cho hình ảnh (Chú thích cho chú thích !!!).', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });
</script>

ToolTip cho phép hiển thị HTML

<div class="tooltip-toggler" id="tooltip-5">
Di chuột vào đây!</div>
<script type="text/javascript">
new ToolTip('tooltip-5', '<strong>ToolTip</strong><br /><span class="info">Đoạn <b>chú thích</b> cho phép hiển thị đoạn <font color="red">HTML</font>.</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });
</script>

Đây là 3 ví dụ chính cho tiện ích trên.Trang DEMO còn 2 ví dụ nữa mình không đề cập mã tại đây vì chỉ cần thay đổi thuộc tính một chút của 3 ví dụ trên là có thể thành 2 ví dụ dưới và nhiều hơn nữa...

width: 250, :Thay đổi chiều rộng (tương tự với height)
sticky: 0 :Không hiển thị nút đóng ( Hiển thị thay 0=1)
mode: 'cursor',: Mũi tên chỉ theo chuột.
mode: 'trigger',:Mũi tên cố định (chỉ giữa đối tượng cần chú thích - vd cuối)

Chúc bạn thành công

Nguồn : ktnha.blogspot.com

Copy : Hoithanhcaygiang.vn

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!