Oº°‘¨ [C]hia [S]ẻ [O]nline ¨‘°ºO
♥️Chào Mừng Các Bạn Ghé Thăm Forum Chia Sẻ Online♥️
Rất mong các bạn đăng ký làm thành viên để cùng
nhau chia sẻ mọi nỗi buồn vui
Chúc các bạn có những phút thư giãn vui vẻ
♥️Welcome to forum Chia Sẻ Online♥️
Welcome Guest, is this your first visit? Register
All times are GMT. The time now is 07:28 AM.

You are not connected. Please login or register

[Codes] Simple tooltip

Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

1 [Codes] Simple tooltip on Tue May 01, 2012 7:01 am

Minh Tuấn

avatar
Moderator
Moderator
Tooltip cực đơn giản, kích cỡ nhỏ gọn dành riêng cho FM, dựa trên nguyên lý của DHTML Tooltip.
Simplify by : vk. Size : 759 Bytes

- Demo :
Code:
http://demo.c3zone.net/h3-c3tooltip
- Hướng dẫn:
Spoiler:
Javascript codes management tạo Javascript mới :
Title * : FM Simple tooltip
Placement : In all the pages
Javascript Code * :
Code:
    document.write('<div id="c3tip"></div>');
    var enablec3tip = false;
    var tipob = document.getElementById("c3tip");
    function c3tip(ob,cont,color,bgcolor) {
      var cd = FindXY(ob);
      overFlowX = cd['x'] + tipob.offsetWidth - document.body.offsetWidth;
      cd['x'] = overFlowX > 0 ? cd['x'] - overFlowX : cd['x'];
      tipob.style.left = (cd['x']+30) + 'px';
      tipob.style.top = (cd['y'] + ob.offsetHeight + 10) + 'px';
      if (typeof color!= "undefined" && color!= "")
            cont=cont.fontcolor(color);
      if (typeof bgcolor!= "undefined" && bgcolor!= "")
            tipob.style.backgroundColor = bgcolor;
      tipob.innerHTML = cont;
      enablec3tip = true;
      tipob.style.visibility = "visible";
      return false;
    }
    function c3untip() {
      enablec3tip = false;
      tipob.style.visibility = "hidden";
      tipob.style.left = "-1000px";
      tipob.style.backgroundColor = '';
      tipob.style.width = '';
    }

Trang trí : Dưới đây là style trang trí, tùy ý chỉnh sửa các thuộc tính cho vừa ý. Việt K đã chú thích ý nghĩa các thuộc tính trong code CSS.
Chèn vào CSS
Code:
    #c3tip {
      z-index: 999; /*Vị trí, trạng thái mặc định*/
      left: -300px; top:0px;
      visibility: hidden;
      position: absolute;
      padding: 15px;
      text-align:left;
      -moz-opacity: 0.8; /* Độ trong suốt 80% */
      opacity: 0.8;
      filter: alpha(opacity=80);
      border: #000000 0px solid; /* Màu viền, bo tròn viền */
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      font-size: 9pt; font-weight:bold; /* Kiểu, cỡ, màu chữ mặc định */
      font-family: Arial; color:#fff;
      background-color: #000; /* Màu nền mặc định */
      width: auto; /* Chiều rộng tối đa */
      max-width: 340px;
      width:expression(document.body.clientWidth > 340? "340px": "auto");
    }

Cách sử dụng, tùy biến tooltip : Thêm sự kiện sau vào đối tượng muốn gắn tooltip.
Code:
    onmouseover="c3tip(this,'[Nội dung trong tooltip]','[Màu chữ]','[Màu nền]')" onmouseout="c3untip()"

Ví dụ muốn gắn tooltip vào 1 link
Code:
    <a href="http://demo.c3zone.net/h3-c3tooltip">Click here</a>
...Sửa thành:
Code:
    <a onmouseover="c3tip(this,'Click vào đây để xem demo')" onmouseout="c3untip()" href="http://demo.c3zone.net/h3-c3tooltip" >Click here</a>

Cách đặt màu chữ và màu nền tooltip xem trong demo

TUT by vk - c3zone.net



I ♥️ Chia Sẻ Online,Khách viếng thăm
Xem lý lịch thành viên http://chiaseonline.forumvi.com

2 Re: [Codes] Simple tooltip on Thu May 03, 2012 5:33 pm

withfun

avatar
Thành Viên
Thành Viên
xem

Xem lý lịch thành viên http://teen-ub.forumvi.com/

3 Re: [Codes] Simple tooltip on Thu May 03, 2012 9:17 pm

Ty Khoai Lang

avatar
Thành Viên
Thành Viên
see

Xem lý lịch thành viên http://teenhanoi.us.to

Sponsored content


Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết