[Hỏi đáp] Hiện toolip khi di chuột

  Bài viết hay nhất1
cho mình xin code hiện toolip khi di chuột vào image ạ
  Bài viết hay nhất2
Bạn đang sài tooltip dạng nào? và muốn hiện gì trong tooltip? demo?
  Bài viết hay nhất3
chưa ạ, mình chưa xài loại toolip nào hết, mình có add zzrank của bạn, muốn hiện toolip về thông tin của nó
mav-land.forumvi.com
  Bài viết hay nhất4
Hở, thế thì thêm thuộc tính title vào ảnh là đc rồi.
Code:
<img src="http://r28.imgfast.net/users/2816/63/36/82/avatars/1-2.png" title="baivong's avatar" alt="baivong's avatar" />
  Bài viết hay nhất5
ý mình là hiện toolip dạng như toolip của thống kê bài viết dc ko ạ
  Bài viết hay nhất6
HTML:
Code:
<img src="http://r28.imgfast.net/users/2816/63/36/82/avatars/1-2.png" onmouseover="show_tooltip(this, 'baivong\'s avatar');" alt="baivong's avatar" />

CSS:
Code:
#tooltip {
    background-color: #FFF;
    border: 2px solid #333;
    color: #131313;
    max-width: 550px;
    padding: 10px;
}

Javascript:
Code:
var versionMinor = parseFloat(navigator.appVersion),
    versionMajor = parseInt(versionMinor),
    IE = document.all && !window.opera && 7 > versionMajor,
    IE7 = document.all && !window.opera && 7 <= versionMajor,
    OP = window.opera,
    FF = document.getElementById,
    NS = document.layers;

function get_item(a, c) {
    if (IE) return c ? window.opener.document.all[a] : document.all[a];
    if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
    if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
}
var current_tooltip;

function show_tooltip(a, c) {
    var b = get_item("tooltip");
    b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));
    b.style.zIndex = 1000;
    b.style.position = "absolute";
    b.innerHTML = "<p>" + c + "</p>";
    b.style.visibility = "visible";
    a.onmousemove = move_tooltip;
    a.onmouseout = function () {
        b.style.visibility = "hidden"
    };
    a.title = ""
}
var offsetxpoint = -60,
    offsetypoint = 20,
    real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
    real_body = document.documentElement ? document.documentElement : document.body;

function move_tooltip(a) {
    var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
        d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
        b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
        e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
        f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;
    current_tooltip = get_item("tooltip");
    current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";
    current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"
}
  Bài viết hay nhất7
tks bạn nhiều lắm ạ :*
  Bài viết hay nhất8
à, cho mình phiền baivong một chút nha, mình xài zzrank á, add toolip vào huy chương ở js thì làm sao z bạn, mình hơi đần ạ :(
  Bài viết hay nhất9
Trong code zzRank, dòng 68, nó thế này:
Code:
all += '<fieldset><legend>' + data_rank[key].title + '</legend><img src="' + data_rank[key].icon + '" alt="' + data_rank[key].title + '" title="' + data_rank[key].desc + '" /></fieldset>';
Sửa lại thành:
Code:
all += '<fieldset><legend>' + data_rank[key].title + '</legend><img src="' + data_rank[key].icon + '" alt="' + data_rank[key].title + '" onmouseover="show_tooltip(this, \'' + data_rank[key].desc + '\');" /></fieldset>';
  Bài viết hay nhất10
Mình đã chèn CSS vào CSS Stylesheet và Javascript ở trên vào viewtopic_body để cho hiện tooltip của Bài viết liên quan nhưng bị lỗi khi di chuột vào thì nó lại hiển thị tiêu đề bài viết bên dưới một hàng. Ví dụ như khi đưa trỏ chuột vào bài Thêm quà tặng âm nhạc cho forumvi thì nó lại hiển thị bài Quà tặng âm nhạc:


Hình minh hoạ

Rất mong các bạn giúp mình sửa lỗi trên. Cảm ơn các bạn nhiều.

Demo: http://doquangthiem.lifeme.net/

Nick test: Panda

Password: 123panda
  Bài viết hay nhất11

Zzbaivong wrote:Hở, thế thì thêm thuộc tính title vào ảnh là đc rồi.
Code:
<img src="http://r28.imgfast.net/users/2816/63/36/82/avatars/1-2.png" title="baivong's avatar" alt="baivong's avatar" />
Cho cái thuộc tính title hiển thị như cái tooltip mà BaiVong hướng dẫn được ko? như vậy thì tất cả thuộc tính title trên toàn forum sẽ được hiển thị tooltip khi rê chuột vào.
  Bài viết hay nhất12
Cho em hỏi ngoài lề 1 chút

thế cái code này có chức năng gì mà sao bác lúc nào cũng dùng vậy ( hay là để tương thích trên mọi trình duyệt )

Code:
var versionMinor = parseFloat(navigator.appVersion),
    versionMajor = parseInt(versionMinor),
    IE = document.all && !window.opera && 7 > versionMajor,
    IE7 = document.all && !window.opera && 7 <= versionMajor,
    OP = window.opera,
    FF = document.getElementById,
    NS = document.layers;

function get_item(a, c) {
    if (IE) return c ? window.opener.document.all[a] : document.all[a];
    if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
    if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
}
  Bài viết hay nhất13

anhdaodaica1 wrote:
Zzbaivong wrote:Hở, thế thì thêm thuộc tính title vào ảnh là đc rồi.
Code:
<img src="http://r28.imgfast.net/users/2816/63/36/82/avatars/1-2.png" title="baivong's avatar" alt="baivong's avatar" />
Cho cái thuộc tính title hiển thị như cái tooltip mà BaiVong hướng dẫn được ko? như vậy thì tất cả thuộc tính title trên toàn forum sẽ được hiển thị tooltip khi rê chuột vào.

Trang Home có 2 tooltip kìa tách bỏ 1 cái ra đi rồi tính tiếp .
  Bài viết hay nhất14

loving9you wrote:
anhdaodaica1 wrote:
Zzbaivong wrote:Hở, thế thì thêm thuộc tính title vào ảnh là đc rồi.
Code:
<img src="http://r28.imgfast.net/users/2816/63/36/82/avatars/1-2.png" title="baivong's avatar" alt="baivong's avatar" />
Cho cái thuộc tính title hiển thị như cái tooltip mà BaiVong hướng dẫn được ko? như vậy thì tất cả thuộc tính title trên toàn forum sẽ được hiển thị tooltip khi rê chuột vào.

Trang Home có 2 tooltip kìa tách bỏ 1 cái ra đi rồi tính tiếp .
1 cái của lasttopic, xóa thì nó không hiện thông tin khi rê chuột ^^
  Bài viết hay nhất15
Không đúng Last của Baivong đâu có 2 tooltip như vậy , do bạn add thêm JS tooltip nên mới vậy .
  Bài viết hay nhất16

loving9you wrote:Không đúng Last của Baivong đâu có 2 tooltip như vậy , do bạn add thêm JS tooltip nên mới vậy .
Sr, mình nói ko rõ ràng, cái nằm ở index_body là của Baivong còn cái nữa mình áp dụng cho toàn bộ diễn đàn vì phần tài sản trong viewtopic cần tooltip :D
You cannot reply to topics in this forum