ایجاد Tooltip با استفاده از Css

چطور با استفاده از css (سی اس اس) Tooltip(تول تیپ) درست کنیم؟

 

 برای دیدن مثال ، روی لینک زیر را کلیک کنید.

 

درست کردن tooltip با استفاده از Css

 

 شما به راحتی می توانید با استفاده از css و html و بدون استفاده از جاوا و... حالت tooltip را ایجاد کنید...

 

ما برای شما یک مثال کوچک را قرار می دهیم که شما می توانید با ایده گرفتن از ترفند این مثال علاوه بر ایجاد tooltip های زیباتر قادر خواهید بود منوهای آبشاری و.... ایجاد کنید(البته در آینده آموزش ایجاد منوهای آبشاری با css و html را قرار خواهیم داد)

 

1- یک فایل html ایجاد کنید و سپس کدهای زیر را در بین تگ های <head></head>

 

<style type="text/css">

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<span style="font-size: small;">body{
    background-color:#ccc;/*رنگ پس زمینه کل صفحه*/
    text-align: right;/*مطالب کل صفحه را راست چین می کند*/
    font-family:Tahoma;/*نوع فونت مطالب*/
    margin: 100px;/*فاصله مطالب از کناره های سایت*/
    direction:rtl;/*مطالب کل صفحه را راست چین می کند*/
    }
p.tip{
    display:none;/*نشان ندادن پیغام هنگام لود شدن صفحه*/
    border: 4px solid blue;/*خط دور پیغام آبی باشد*/
    height: 49px;/*ارتفاع پیغام 49پیکسل*/
    margin-bottom: 0;
    margin-right: 121px;
    margin-top: 0;
    padding-left: 11px;
    padding-right: 11px;
    padding-top: 22px;
    position: absolute;
    color:#000;
    width: 280px;
    background-color:#fff;/*رنگ پس زمینه پیغام*/}
 
b.link{
text-decoration:blink;
color:red
}
b.link:hover p.tip{
    display:block;/*نشان دادن پیغام هنگامی که موس روی کلمه "گروه سایت سازی"میرود*/
    }
</span>

 

</style>

 

2-و سپس کد های زیر را در تگ<body></boby> قرار دهید.


<b class="link">گروه سایت سازی<p class="tip">طراحی و پیاده سازی انواع وب سایت</p></b> یکی از حرفه ای ترين شرکتهای
طراحی وب سایت حرفه ای و بهینه سازی انواع وب سایت در ايران است. این شرکت طراحی وب سایت حرفه ای با سالها تجربه در حوزه طراحی وب سایت حرفه ای ، طراحی پرتال و فروشگاهای اینترنتی برای شرکتها ، سازمان ها ، اشخاص و....بالاترین تجربه و بیشترین تخصص را داراست.

تگ های مطلب

طراحی وب سایت حرفه ای ، طراحی وب سایت با قیمت مناسب و ارزان ، طراحی وب سایت حرفه ای با جوملا، طراحی وب سایت با قیمت مناسب ، طراحی وب سایت ارزان ، طراحی وب سایت با جوملا