สร้าง Tooltip frame work ไว้ใช้เองดิ

posted on 23 Apr 2013 12:58 by limitblog in css directory Idea
   ก่อนเข้าเรื่องต้องสวัสดีย้อนหลังวันสงกราณ์ก่อนนะครับ.. :D
 
เข้าเรื่อง:
 
              วันนี้เป็น css มั่วๆ เรื่อง tooltip ทำในรูปแบบ css frame work อย่างง่ายครับ (ถ้าใครไม่รู้ว่า tooltip คืออะไร >>กดตรงนี้<< )
   มันง่ายจริงเหรอ ?? = ผมยืนยันว่าง่าย [เพราะมั่วเองง่ายเอง ฮ่าฮ่า]
   แล้วมันจะใช้ได้จริงหรือ ??  = ใช้ได้จริง แน่นอน
   แล้วมันทำอย่างไรล่ะ = มาดูกัน
 
สร้าง tag ง่ายๆขึ้นมาก่อน:
 
/*tl = tooltip*/
 <a class="tl-contain" href="#"><span class="tl ">Tooltip area</span>text show tooltip area</a>
 หรือ จะเป็น tag paragrah strong em b s i อะไรก็ได้ แค่ใส่ class ลงไป
 <strong class="tl-contain" ><span class="tl ">Tooltip area</span>text show tooltip area</strong >
 
มาดูโครงสร้าง css อย่างมั่วกันก่อนนะครับ:
 
.tl-contain{
  position:relative; 
/*ตัวนี้จะเป็นตัว lock tootip ไม่ให้หลุดออกไป*/
}

/* tooltip body */

.tl{
    display:block;
    position:absolute;
/*มีผลกับ tl-contain*/
    width:200px;
/*make default width*/
    padding:10px 15px;
    left:50%;
/* set normal center*/
    bottom:30px;
    margin-left:-115px;
/* /center/ width 200-left 100 + 15(padding 15+15=30/2 left and right)*/

    color:#fff;
    border-radius:3px;
    background: gray;
/*default*/
 
/*set style*/
    box-shadow:inset 0 1px rgba(255,255,255,.3),0 0 5px rgba(0,0,0,.5);
    border:solid 1px rgba(0,0,0,.2);

/*effect*/
    opacity: 0;
    visibility: hidden;
    -moz-transition:all .5s;
    -webkit-transition:all .5s
}

                  
 /*========hover effect======*/

                    .tl-contain:hover .tl{
                        opacity: 1;
                        visibility: visible;
                    }
 

/*========Fix image in box======*/
.tl img{
  max-width:100%;
  padding-top:6px;
}

/*======== tringle ======*/
.tl:before{
  content:"";
  position:absolute;
  width:15px;
  height:15px;

  bottom:-8px;
  left:107px;
/* /center/ width 200-left 100 + (width/2)*/
  -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
 
/*style*/
    border-bottom:solid 1px rgba(0,0,0,.2);

    border-right:solid 1px rgba(0,0,0,.2);
 
 /*kill inner shadow*/
    box-shadow:none !important;
}

 
ตัวอย่าง     นี่คือข้อความแสดง Tooltip areatootip
 
--------------------------------------------------------------------------------------------------------------

Frame work


Width :default 200px


width default 200px.

width default 200px.
<a href="#" class="tl-contain"><span class="tl">Tooltip</span>text</a>

width 300px.

width 300 pixel
<a href="#" class="tl-contain"><span class="tl w-300">Tooltip</span>text</a> css .w-300{ width:300px; margin-left:-165px;/* /center/ width 300-left 150 + 15(padding 15+15=30/2 left and right)*/ } .w-300:before{ left:157px;/* /center/ width 300-left 150 + (width/2)*/ }

width 400px.

width 400 pixel
<a href="#" class="tl-contain"><span class="tl w-400">Tooltip</span>text</a> css .w-400{ width:400px; margin-left:-215px;/* /center/ width 400-left 200 + 15(padding 15+15=30/2 left and right)*/ } .w-400:before{ left:207px;/* /center/ width 400-left 200 + (width/2)*/ }

width 500px.

width 500 pixel
<a href="#" class="tl-contain"><span class="tl w-500">Tooltip</span>text</a> css .w-500{ width:500px; margin-left:-265px;/* /center/ width 500-left 250 + 15(padding 15+15=30/2 left and right)*/ } .w-500:before{ left:257px;/* /center/ width 500-left 250 + (width/2)*/ }

Background color :default gray


Background default gray

Background default gray
<a href="#" class="tl-contain"><span class="tl">Tooltip</span>text</a>

CadetBlue

CadetBlue
<a href="#" class="tl-contain"><span class="tl CadetBlue">Tooltip</span>text</a>

Crimson

Crimson
<a href="#" class="tl-contain"><span class="tl Crimson">Tooltip</span>text</a>

DarkSlateBlue

DarkSlateBlue
<a href="#" class="tl-contain"><span class="tl DarkSlateBlue">Tooltip</span>text</a>

HotPink

HotPink
<a href="#" class="tl-contain"><span class="tl HotPink">Tooltip</span>text</a>

IndianRed

IndianRed
<a href="#" class="tl-contain"><span class="tl IndianRed">Tooltip</span>text</a>

Olive

Olive
<a href="#" class="tl-contain"><span class="tl Olive">Tooltip</span>text</a>

OrangeRed

OrangeRed
<a href="#" class="tl-contain"><span class="tl OrangeRed">Tooltip</span>text</a>

Gold

Gold
<a href="#" class="tl-contain"><span class="tl Gold">Tooltip</span>text</a>

DeepSkyBlue

DeepSkyBlue
<a href="#" class="tl-contain"><span class="tl DeepSkyBlue">Tooltip</span>text</a>

SeaGreen

SeaGreen
<a href="#" class="tl-contain"><span class="tl SeaGreen">Tooltip</span>text</a>

css pack

css .CadetBlue, .CadetBlue:before{ background:CadetBlue ;} .Crimson ,.Crimson:before{background:Crimson ;} .DarkSlateBlue ,.DarkSlateBlue:before{background: DarkSlateBlue ;} .HotPink ,.HotPink:before{background: HotPink ;} .IndianRed ,.IndianRed:before{background: IndianRed } .Olive ,.Olive:before{background: Olive } .SaddleBrown ,.SaddleBrown:before{background: SaddleBrown } .OrangeRed ,.OrangeRed:before{background: OrangeRed } .Gold ,.Gold:before{background: Gold } .DeepSkyBlue ,.DeepSkyBlue:before{ background: DeepSkyBlue } .SeaGreen ,.SeaGreen:before{background: SeaGreen}

Effect :default opacity


Effect default opacity

default opacity
<a href="#" class="tl-contain"><span class="tl">Tooltip</span>text</a>

Top

Top
<a href="#" class="tl-contain"><span class="tl top">Tooltip</span>text</a> css /*hover top*/ .tl.top{ bottom:50px;} .tl-contain:hover .tl.top{bottom:30px;}

Bottom

Bottom
<a href="#" class="tl-contain"><span class="tl bottom">Tooltip</span>text</a> css /*hover bottom*/ .tl.bottom{ bottom:0px;} .tl-contain:hover .tl.bottom{bottom:30px;}

Zoom-in

Zoom-in
<a href="#" class="tl-contain"><span class="tl zoom-in">Tooltip</span>text</a> /*hover zoom-in*/ .tl.zoom-in{ bottom:-30px; -moz-transform:scale(.1); -webkit-transform:scale(.1); } .tl-contain:hover .tl.zoom-in{ bottom:30px; -moz-transform:scale(1); -webkit-transform:scale(1); }

Zoom-out

Zoom-out
<a href="#" class="tl-contain"><span class="tl zoom-out">Tooltip</span>text</a> /*hover zoom-out*/ .tl.zoom-out{ bottom:150px; -moz-transform:scale(3); -webkit-transform:scale(3); } .tl-contain:hover .tl.zoom-out{ bottom:30px; -moz-transform:scale(1); -webkit-transform:scale(1); }
--------------------------------------------------------------------------------------------------------------
 
เอาไปแปะใน blog เน้อ :
 
<link rel="stylesheet" type="text/css" media="all" href="https://dl.dropboxusercontent.com/u/70533757/how2/tooltip/css/tooltip.css">
 
ตัวอย่าง: การใช้แบบมั่ว
 
html
 
<a  class="tl-contain" href="#"><span class="tl DarkSlateBlue w-500 zoom-in">ช้างแอฟริกา หรือ ช้างแอฟริกัน (อังกฤษ: African elephant) เป็นช้างสกุลหนึ่ง ที่อาศัยอยู่ในทวีปแอฟริกา จากหลักฐานฟอสซิลที่ค้นพบทำให้ทราบว่า ช้างแอฟริกาอาศัยอยู่ในทวีปแอฟริกามาตั้งแต่ยุคไพลสโตซีน</span>Loxodonta</a>
 
การแสดงผล
 
 
 
ปล. ช่วงนี้มันร้อนมากเลยเลยทำอะไรได้ค่อนข้างช้าสมาธิมันสั้นลงไป ลูกเล่นที่ใส่ไปก็น้อยนิด style ก็มีแบบเดียวเห้ยยย ยังไงใครเอาไปโมก็จะขอบพระคุณมากเลยแหละ :D

Comment

Comment:

Tweet

ขอบพระคุณมากครับ

#10 By Daniel (116.58.251.123|116.58.251.123) on 2014-12-30 19:33

Hot! Hot!  ขอบคุณค่า หาวิธีมาสักพักใหญ่ๆแล้วว
ในที่สุดก็หาเจออออ cry

#9 By By-feurn on 2013-08-02 11:13

โอ้... สวดยอดเลยครับท่าน big smile big smile big smile

#8 By ozinepank on 2013-05-27 07:54

Cupid laid by his brand, and fell asleep:
A maid of Dian's this advantage found,
-----------------------------------------
Diablo 3 Gold and Guild Wars 2 Gold

#7 By diablo3bay520 on 2013-05-21 12:17

ความรู้มาเหนือเมฆอีกแล้วชอบครับ confused smile Hot!

#6 By BoatKung on 2013-05-12 20:30

sad smile  โหดอีกแล้วค่ะพี่ ไม่เคยเขียนเองเลย
ลอกเขาตลอด ขอบคุณมากค่า (แอบไปทำตาม)

#5 By NAT on 2013-05-08 21:33

บล็อกนี้มีลูกเล่นเพียบเลย
( Hot! Hot! )
สวัสดีวันสงกรานต์ย้อนหลังเช่นกันครับ

#4 By Nirankas on 2013-04-23 18:40

ใครเอา Code ไปใส่
บล็อกคงไฮโซขึ้นแน่ๆ cry Hot! Hot! Hot!

#3 By Copiic on 2013-04-23 18:02

กราบขอบพระคุณค่ะ >w<Hot!

#2 By KAINO on 2013-04-23 17:18

ท่านผู้เจริญ สุดยอดเลยครับ Hot! Hot! Hot!
ขอบคุณสำหรับความรู้ดีๆแบบนี้ครับ open-mounthed smile confused smile

#1 By บุรุษนิรนาม on 2013-04-23 15:06