نحوه ساخت Tooltip

[ab.ali]

با سلام، چطور می شه Tooltip ساخت؟

[mohamad_torabi]

سلام
سورس و اموزش
http://www.ijquery.ir/category/tooltips/

[qartalonline]

http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/
http://www.jquerybyexample.net/2012/09/tutorial-for-creating-simple-stylized-tooltip-using-jquery.html
https://www.youtube.com/watch?v=BHvH7EkDXMg

[vimax23]

نیاز به استفاده از پلاگین و کدهای سنگین آماده نیست معمولا تو سورس برنامه ای که مینویسی تولتیپ های آماده باید کلی وقت بزاری کستوم کنی بهتره خودت یه دونه بنویسی

دو تا دیو بساز ، اونی که ثابت هست پوزیشن relative بزار
اون دیوی که قراره مثل تولتیپ نشون داده بشه پوزیشن absolute بزار
برای دیو تولتیپ display برابر none بزار و حالت hover براش تعریف کن
حالا باید این کلاس تولتیپ رو که مخفی هست با جاوااسکریپت نمایش بدی یعنی با .show() و .hide() تابع براش مینویسی بخوایی افکتی بیاد میتونی کلاس بدی بهش یا با همین جاوااسکریپت مثلا اسلایدی بیاری البته به نظرم همین سادش بهتره

[ab.ali]

نیاز به استفاده از پلاگین و کدهای سنگین آماده نیست معمولا تو سورس برنامه ای که مینویسی تولتیپ های آماده باید کلی وقت بزاری کستوم کنی بهتره خودت یه دونه بنویسی

دو تا دیو بساز ، اونی که ثابت هست پوزیشن relative بزار
اون دیوی که قراره مثل تولتیپ نشون داده بشه پوزیشن absolute بزار
برای دیو تولتیپ display برابر none بزار و حالت hover براش تعریف کن
حالا باید این کلاس تولتیپ رو که مخفی هست با جاوااسکریپت نمایش بدی یعنی با .show() و .hide() تابع براش مینویسی بخوایی افکتی بیاد میتونی کلاس بدی بهش یا با همین جاوااسکریپت مثلا اسلایدی بیاری البته به نظرم همین سادش بهتره

ممنون، آره فکر می کنم اینطوری که شما گفتین بهتر باشه چون اینطوری پدر اینترنت کاربر در می آد!

[ab.ali]

نیاز به استفاده از پلاگین و کدهای سنگین آماده نیست معمولا تو سورس برنامه ای که مینویسی تولتیپ های آماده باید کلی وقت بزاری کستوم کنی بهتره خودت یه دونه بنویسی

دو تا دیو بساز ، اونی که ثابت هست پوزیشن relative بزار
اون دیوی که قراره مثل تولتیپ نشون داده بشه پوزیشن absolute بزار
برای دیو تولتیپ display برابر none بزار و حالت hover براش تعریف کن
حالا باید این کلاس تولتیپ رو که مخفی هست با جاوااسکریپت نمایش بدی یعنی با .show() و .hide() تابع براش مینویسی بخوایی افکتی بیاد میتونی کلاس بدی بهش یا با همین جاوااسکریپت مثلا اسلایدی بیاری البته به نظرم همین سادش بهتره

راستی یک سوال، نمی شه از position:relative برای ToolTip استفاده کرد؟، چون من برای سایت وردپرسی و برای عکس مطالب می خوام، خودتون می دونید دیگه چه اتفاقی می افته.

[ab.ali]

راستی من اینو برای نمایش ToolTip نوشتم ولی کار نمی کنه، چرا؟



.ContentImage{
width:580px;
height:auto;
overflow:hidden;
margin:10px auto;
clear:both}

.ToolTip{
width:100%;
height:40px;
background-color:#0099ff;
display:none;
font:13px 'B Yekan',Arial;
line-height:40px;
text-align:center;
color:#FFF}

.ContentImage:hover ~ .ToolTip{
display:block}

[vimax23]

راستی یک سوال، نمی شه از position:relative برای ToolTip استفاده کرد؟، چون من برای سایت وردپرسی و برای عکس مطالب می خوام، خودتون می دونید دیگه چه اتفاقی می افته.

چه ربطی داره!
شما اون المانی که میخوایین آواتاردار بشه رو فقط باید بهش یه کلاس بدین که توش relative باشه که تولتیپ بهش بچسبه ، این کار خیلی ساده هست
مراحلش رو بهت گفتم به نظرم بهتره تو http://jsfiddle.net/ کدتو ساده بنویس بعد که شکلشو پیدا کردی ببر روی سیستمه سایتت حالا هر چی میخواد باشه سیستمی آماده مثل وردپرس یا دست نویسی شده از پایه فرقی نداره
اینطوری دیگه بدبختی کستوم کردنه طولانیش و سنگینی تولتیپ های آماده رو نداری

[ab.ali]

به خاطر این سوال رو پرسیدم چون هم با jQuery و هم با همین کد CSS این کار رو کردم ولی نمایش داده نشد، چون وردپرسی هستش و زمان می بره، واقعیتش حوصله ندارم بریزم توی jsfiddle!