Tooltip tiêu đề box hiệu ứng mới[✔]

[IIluffyII]

Đây là code tooltip có hiệu ứng khá đẹp.Dành cho phpbb.(các phiên bản khác mình chưa thử)Khi nó hiện ra và biến mất rất đẹp.
Demo:http://strawhat-group.tk
Cách làm:
B1:
Vào index_box tìm:

Code:

class="forumtitle"

Thay bằng:

Code:

class="forumtitle" title="{catrow.forumrow.FORUM_NAME}"

B2:Chèn Vào cuối index_box:
Trả Lời để thấy:

Code:

                 
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script>
  $(function() {
    $( ".forumtitle" ).tooltip({
      hide: {
        effect: "explode",
        delay: 250
      }
    });
  });
  </script>

Nguồn: http://strawhat-group.tk/

Lưu Ý: Khi copy nhớ ghi rõ nguồn.

[Rin]

hiệu ứng hay nên típ tục phát huy

[Lowie]

demo là nguồn luôn à? Đẹp đấy

[rockmanvnx6]

ặc jqueryui

[hunghsmn]

Rê chuột vào tiêu đề thì hiện cái gì chứ không lẽ hiện lại tiêu để? (title="{catrow.forumrow.FORUM_NAME})

[HoàngTửNaivip5p]

Hiệu ứng đẹp quá, vote cho bạn
P/s: nên thay tiêu đề box thành mô tả box có phải hay k nhỉ

[Ocean Sapphire]

hay quá, nếu có thể tách riêng ra tạo thành tooltip cho bài viết thì tuyệt

[K.-Kun]

hay quá, nếu có thể tách riêng ra tạo thành tooltip cho bài viết thì tuyệt

Ừ! cái này hay nè!! Tooltip cho bài viết!!! chuẩn

[Zero]

script tooltip dựa theo attr của html mình viêt chừng 5 dòng...không cần 1 đống scritp với css như thế đâu...

[notme]

dạo này dạt ở forum nào rồi bác 0 ơi

[anhdaodaica1]

vậy tooltip này hiện title và chèn class="forumtitle" vào nơi mún hiện tooltip hả chủ thớt ?

[Zero]

Đây là tooltip mình viết cách đây không lâu...Thêm data-tooltip="nội dung tooltip" vào thành phần mà bạn muốn hiện tooltip. Có hỗ trợ html
JS

Code:

// Written by Zero (mark.polo.nguyen@gmail.com)
$(function(){tooltip=$('body').find('[data-tooltip]');$(tooltip).hover(function(e){content=this.getAttribute('data-tooltip');$('#tooltip').html(content).css("top",(e.pageY-20)+"px").css("left",(e.pageX+10)+"px").fadeIn("fast")},function(){$("#tooltip").hide()});$(tooltip).mousemove(function(e){$("#tooltip").css("top",(e.pageY-20)+"px").css("left",(e.pageX+10)+"px")})});

CSS

Code:

#tooltip {
    position:absolute;
    border:1px solid #D5D5D5;
    background:#F8F8F8;
    padding:4px;
    display:none;
    border-radius:4px;
    box-shadow:0 1px 1px rgba(0, 0, 0, 0.05), 0 1px 0 #FFFFFF inset;
    z-index: 1004;
}

Vào overall_header, cho vào dưới body

Code:

<div id="tooltip"></div>

Trang chủ: http://code.google.com/p/ztip/

dạo này dạt ở forum nào rồi bác 0 ơi

Đang design giùm cái forum này, với tiếp tục phát triển cái forum cũ Dạo này bận nơi chưa có thời gian làm tiếp mấy mod cũ

[IIluffyII]

Uhm..vì jquery mình hơi gà..nhưng tooltip này hiệu ứng đẹp mà.hi

[Rune]

Hiệu ứng đẹp

[ligerv]

gắn cái jquery Ui vào thì tận dụng làm thêm nhiều cái nữa chứ để phí. với fm cũng có script jquery rồi ,bỏ cái này chắc dc

Code:

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>


[chupy]

© 2013 strawhat. Skin strawhat-onepieceSkin By: Luffy93
^^
đọc thấy hay

[havanqui]

Hiệu ứng đẹp đó...thanks chủ thớt...tuyệt quá...^^

[kienduc_2000]

class="forumtitle" sao em không tìm thấy trong forum của em vậy

[Sponsored content]