Tooltip cho Latest topics theo phong cách "em đến rồi đi" :))

[vandonstar]

Demo: (Diễn đàn đang sử dụng cho Latest topics - Chỉ vào và xem hiệu ứng)

Code:

http://www.vandonstar.com

Hướng dẫn:
Modules > Portal & Widgets > Forum widgets management
Trong Recent topic chọn Sửa chữa
Activate the topics scrolling : Chọn không
(Bước này là chọn dạng Recent topic cố định, không phải dạng chạy lên hay xuống)

Tiếp theo:
Trong mod_recent_topics

Tìm:

Code:

<a href="{classical_row.recent_topic_row.U_TITLE}">

Thay bằng:

Code:

<a href="{classical_row.recent_topic_row.U_TITLE}" class="hastip" title="{classical_row.recent_topic_row.L_TITLE}">

Vẫn trong mod_recent_topics

Tìm:

Code:

<!-- END recent_topic_row -->

Thêm vào sau đó cái này:

Code:

<script type="text/javascript" src="http://vandonstar.googlecode.com/files/tooltipsy.min.js"></script>

Và CODE này (Tạm gọi đây là "Phong cách" nhé - Sẽ update những phong cách khác cho các bạn lựa chọn)
(Trong code này nếu bạn nào hiểu thì có thể sửa cho nó chạy các kiểu theo ý mình)
Phong cách Chạy chéo từ phía trên bên trái xuống rồi chạy chéo xuống phía dưới bên trái:

Code:


<script type="text/javascript">
$('.hastip').tooltipsy({
    offset: [0, -1],
    show: function (e, $el) {
        $el.css({
            'top': parseInt($el[0].style.top.replace(/[a-z]/g, '')) - 100 + 'px',
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 200 + 'px',
            'opacity': '0.0',
            'display': 'block'
        }).animate({
            'top': parseInt($el[0].style.top.replace(/[a-z]/g, '')) + 100 + 'px',
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 200 + 'px',
            'opacity': '1.0'
        }, 200);
    },
 hide: function (e, $el) {
        $el.animate({
            'left': '-=500px',
            'top': '+=100px',
            'opacity': '0.0'
        }, 1000);
    }
});
</script>

Thêm vào Css cái này:

Code:

.tooltipsy{
font-style:italic;
padding:5px;
width:auto;
color:#ffffff;
background-color:#000000;
border:1px solid #8A8A8A;
box-shadow: 2px 2px 2px #8A8A8A;
}

Good luck

Update:
Kiểu rơi từ trên xuống rồi chạy sang bên trái và biến mất:

Code:

<script type="text/javascript">
$('.hastip').tooltipsy({
    offset: [0, -1],
    show: function (e, $el) {
        $el.css({
            'top': parseInt($el[0].style.top.replace(/[a-z]/g, '')) - 200 + 'px',
            'opacity': '0.0',
            'display': 'block'
        }).animate({
            'top': parseInt($el[0].style.top.replace(/[a-z]/g, '')) + 200 + 'px',
            'opacity': '1.0'
        }, 200);
    },
 hide: function (e, $el) {
        $el.animate({
            'left': '-=500px',
            'opacity': '0.0'
        }, 1000);
    }
});
</script>

Kiểu chạy từ dưới lên rồi chạy tiếp lên phía trên và biến mất:

Code:

<script type="text/javascript">
$('.hastip').tooltipsy({
    offset: [0, 10],
    show: function (e, $el) {
        $el.css({
            'top': parseInt($el[0].style.top.replace(/[a-z]/g, '')) + 200 + 'px',
            'opacity': '0.0',
            'display': 'block'
        }).animate({
            'top': parseInt($el[0].style.top.replace(/[a-z]/g, '')) - 200 + 'px',
            'opacity': '1.0'
        }, 200);
    },
 hide: function (e, $el) {
        $el.animate({
            'top': '-=300px',
            'opacity': '0.0'
        }, 1000);
    }
});
</script>

Kiểu chạy từ trên xuống rồi đi tiếp xuống dưới và biến mất:

Code:

<script type="text/javascript">
$('.hastip').tooltipsy({
    offset: [0, -1],
    show: function (e, $el) {
        $el.css({
            'top': parseInt($el[0].style.top.replace(/[a-z]/g, '')) - 200 + 'px',
            'opacity': '0.0',
            'display': 'block'
        }).animate({
            'top': parseInt($el[0].style.top.replace(/[a-z]/g, '')) + 200 + 'px',
            'opacity': '1.0'
        }, 200);
    },
 hide: function (e, $el) {
        $el.animate({
            'top': '+=300px',
            'opacity': '0.0'
        }, 1000);
    }
});
</script>

Kiểu chạy từ trái sang và thu gọn rồi biến mất:

Code:

<script type="text/javascript">
$('.hastip').tooltipsy({
    offset: [-10, 0],
    show: function (e, $el) {
        $el.css({
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 500 + 'px',
            'opacity': '0.0',
            'display': 'block'
        }).animate({
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 500 + 'px',
            'opacity': '1.0'
        }, 300);
    },
    hide: function (e, $el) {
        $el.slideUp(1000);
    }
});
</script>

Tạm thời như thế đã

[MarkChan]

đẹp hay vote +

[bb.boy_lion]

hay đẹp. mà 4rum vip quá

[lybi123]

Tuyệt! Vote 1 phát

[thangpro1991]

nick đen như vậy mới vip thank you

[ThằngMậpBệnh]

Cái này chỉ hiện tiêu đề thôi mà . Đâu phải là Tooltip .

[Zero]

dựa trên nền tooltipspy à mình cũng thích cái loại tooltip đó lắm

Cái này chỉ hiện tiêu đề thôi mà . Đâu phải là Tooltip .

Cái đó là tooltip đấy bác

[rippy95]

co cách nào cho toàn thư mục không nhĩ .

Chỉ vô đâu nó cũng hiện

[vandonstar]

Đã cập nhật thêm vài kiểu lượn lờ nữa. Ae và xúc nhanh cho nóng nha

[quangtrung_it]

Tks chũ topic vì tinh thần chia sẻ.

[_Mark_]

cái này hay nha, đem về lưu trữ

[Rin]

phong cách mới quá chuẩn thanks chủ topic

[tranjunhan]

Cho mình xin bảng đăng nhập trược trong forum kau được không?

[baivong]

Nhìn quen mắt ghê, bổ sung nguồn nhé pro

Code:

http://tooltipsy.com/

[luonggiabao12c]

Và CODE này (Tạm gọi đây là "Phong cách" nhé - Sẽ update những phong cách khác cho các bạn lựa chọn)
(Trong code này nếu bạn nào hiểu thì có thể sửa cho nó chạy các kiểu theo ý mình)
Phong cách Chạy chéo từ phía trên bên trái xuống rồi chạy chéo xuống phía dưới bên trái:
cái này chèn vào đâu bác

[luonggiabao12c]

hỏi code này chèn vào đâu mà sao ko ai trả lời vậy trời!!

Code:

<script type="text/javascript">
$('.hastip').tooltipsy({
    offset: [0, -1],
    show: function (e, $el) {
        $el.css({
            'top': parseInt($el[0].style.top.replace(/[a-z]/g, '')) - 100 + 'px',
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 200 + 'px',
            'opacity': '0.0',
            'display': 'block'
        }).animate({
            'top': parseInt($el[0].style.top.replace(/[a-z]/g, '')) + 100 + 'px',
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 200 + 'px',
            'opacity': '1.0'
        }, 200);
    },
 hide: function (e, $el) {
        $el.animate({
            'left': '-=500px',
            'top': '+=100px',
            'opacity': '0.0'
        }, 1000);
    }
});
</script>

[handsomevip007]

Và CODE này (Tạm gọi đây là "Phong cách" nhé - Sẽ update những phong cách khác cho các bạn lựa chọn)
(Trong code này nếu bạn nào hiểu thì có thể sửa cho nó chạy các kiểu theo ý mình)
Phong cách Chạy chéo từ phía trên bên trái xuống rồi chạy chéo xuống phía dưới bên trái:
cái này chèn vào đâu bác

Chủ không hỏi rõ mà lại đưa cái đống này thì ai mà hiểu nổi =="
Cho code vào overall_header đi =="

[luonggiabao12c]

có thấy ai đến ai đi đâu trời.vẫn như cũ ak`.hic

[luonggiabao12c]

đã thử text nhiều forum nhưng bước này của chủ topic là hoàn toàn ko chính xác
tìm:

Code:

<a href="{classical_row.recent_topic_row.U_TITLE}">

nhưng chỉ có là:

Code:

href="{classical_row.recent_topic_row.U_TITLE}">

ko có

Code:

<a

ở trước. vì vậy phải làm sao đây.thử bỏ

Code:

<a

nhưng ko chạy

[AnonPlus]

đã thử text nhiều forum nhưng bước này của chủ topic là hoàn toàn ko chính xác
tìm:

Code:

<a href="{classical_row.recent_topic_row.U_TITLE}">

nhưng chỉ có là:

Code:

href="{classical_row.recent_topic_row.U_TITLE}">

ko có

Code:

<a

ở trước. vì vậy phải làm sao đây.thử bỏ

Code:

<a

nhưng ko chạy

Mỗi skin mỗi khác, dù không có

Code:

<a

nhưng một số forum vẫn chạy được => Không chính xác
Bỏ <a đi thì cũng như không vì nó không quan trọng, cho links forum .

[lucky95]

code hay lắm, diễn đàn của bạn cũng đẹp. cảm ơn đã chia sẻ

[Sponsored content]