[Tự Chế] Tooltip Cực Nhẹ Và Đơn Giản Ver 2

[Draudrey]

demo: http://maze-game.9forum.net/h145-page
khác với ver 1: hàng chuẩn, đẹp

cách thay đổi tooltip (chú ý đoạn này):

<a href="#" class="tooltip" title="Nhớ ghi nguồn khi chôm hàng về dìm nha ">Đây</a>

cái đoạn

Code:

Nhớ ghi nguồn khi chôm hàng về dìm nha :)

thay bằng gì khi muốn cho nó hiện ở tooltip, còn cái

Code:

Đây

thay bằng cái chữ để rê chuột vào

Code:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<div class="container"><h2>Tooltip By ๖ۣۜGhost[1St]Die (๖ۣۜDemon ๖ۣۜDragon)</h2>   
    <p class="back"><a href="maze-game.9forum.net/register" class="tooltip" title="Trở lại maze-game">Vui lòng ủng hộ tớ 1 mem khi xài cái này :)</a></p>
    <p class="exam">Xem đề mô Tooltip: <a href="#" class="tooltip" title="Nhớ ghi nguồn khi chôm hàng về dìm nha :)">Đây</a></p>
</div>

<style>
/*By ๖ۣۜGhost[1St]Die (tên khác: ๖ۣۜDemon ๖ۣۜDragon)*/

body {text-align:center; }
div.container{
    margin: 50px auto;
    width: 700px;
}
 
.tooltip {
    display: inline;
    position: relative;
}
 
.tooltip:hover {
    color: #c00;
    text-decoration: none;
}
 
.tooltip:hover:after {
    background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(51,51,51,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(51,51,51,1)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
    background: linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#333333',GradientType=0 );   
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
    border-radius: 3px;
    bottom: 2.35em;
    color: #fff;
    content: attr(title);
    font-size: 12px;
    display: block;
    left: 1em;
    padding: 8px 20px;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}
 
.tooltip:hover:before {
    width: 10px;
    height: 10px;
    background: rgba(51,51,51,1);
    -webkit-transform: rotate(45deg);
    box-shadow: 1px 1px 0px 0px rgba(0,0,0,1);
    bottom: 1.5em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}
 
a.tooltip:link{
    color:#DB2E66;
    text-decoration:none;
}
 
a.tooltip:visited{
    color:#DB2E66;
    text-decoration:none;
}
 
a.tooltip:hover{
    color:#999;
    text-decoration:none;
}
p.back{margin-top:20px;}
p.exam{
   
    color:#646464;
    line-height:1.5;
    display: block;
    width: 180px;
    margin:150px auto 0px;
}</style>

hình như cái này có vài cái tooltip gần giống cái nì hay sao ấy, kẻo đụng hàng chán lắm vote 1 phiếu nào

P/S: Làm ơn để lại tên người viết trong style

[handsomevip007]

Chôm từ http://cssdeck.com/labs/beautiful-tooltip

[Draudrey]

ủa, đâu có? trang đó trang nào vậy?

Trang web này hiện không có

[hunghsmn]

Ở đây có muôn trùng kiểu tooltip, tự chế làm gì cho mệt, bà con vô đó lấy xài đi:
http://www.dynamicdrive.com/dynamicindex5/

[handsomevip007]

ủa, đâu có? trang đó trang nào vậy?

Trang web này hiện không có

Trang đó là trang đó đó bạn hỏi mình mình biết hỏi ai nhưng chắc chắn code không phải bạn viết

[Rin]

http://cssdeck.com/labs/beautiful-tooltip

đúng là rất giống nhau ko thể tự chế dc

[notme]

thì ra là đi chôm à haizai thế mà kêu tự chế

[MR.Rồng]

2 Cái Là 1

HAizzz

[bosgame]

Trang web này hiện không có

[nightWalker]

Tưởng như nào ...Uầy...Loạn cả bản quyền

[mrkunvl]

Hóa ra chỉ là copy và sửa tưởng như nào

[hunghsmn]

Mình cũng bắt chước "tự chế" Đây nè . Cái này không chỉ viết tooltip cho link mà viết tooltip cho cả text nũa nhé

Code:

<style type="text/css">

a:link{color : #0000ff;text-decoration: none !important;}
#dhtmltooltip{
position: absolute;
left: -300px;
width: 350px;
border: 1px solid black;
border-radius: 5px;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

</style>

<script type="text/javascript">
var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=10 //Customize y offset of tooltip

var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).

document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
document.write('<img id="dhtmlpointer" src="http://www.dynamicdrive.com/dynamicindex5/arrow2.gif">') //write out pointer image

var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20

var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY

var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+offsetfromcursorX+"px"
}

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>


<a href="http://www.yahoo.com" onMouseover="ddrivetip('<b> BẢN THÔNG TIN</b> <p align =justify> <img src =http://i36.servimg.com/u/f36/14/26/60/46/th/dsc04915.jpg width =200 align =left> Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung </p>')";
 onMouseout="hideddrivetip()">Liên kết </a>

<div onMouseover="ddrivetip('Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip Nội dung tooltip ', 450)";
 onMouseout="hideddrivetip()">Văn bản .</div>

(Mình "tự chế" từ trang này, các bạn vô đây coi nhiều thứ hay lắm chứ không chỉ tooltip: http://www.dynamicdrive.com

[baivong]

Hồi trước cũng chế 1 cái khi làm last ver 1 bằng jQuery, sau thấy dùng tooltip của fm có vẻ nhanh hơn.
Hình như xử lý qua jQuery nó chậm hơn dùng thuần javascript thì phải, được cái là ko mắc lỗi trình duyệt.

[Sponsored content]