Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

ساخت تولتیپ به سادگی چند کلیک

ساخت تولتیپ به سادگی چند کلیک

با سلام امروز با ابزاری خاص برای ساخت تولتیپ در خدمت شما دوستان عزیز هستیم با همراه باشید. قبلا از شروع کار باید ابتدا بدانیم که تولتیپ چیست. 🤔

تولتیپ چیست ؟

تولتیپ ها (tooltip, infotip, hint) همان قسمت title کدهای شما میباشند که وظیفه نمایش توضیحات اضافه به کاربران را دارند. ( توضیحات بیشتر )

tooltip-example
نمونه یک تولتیپ

چگونه یک تولتیپ بسازیم ؟

بصورت پیشفرض این قابلیت درون HTML تعریف شده که با افزودن ویژگی title به تگ خود میتوانید این قابلیت را فعال کنید. 😲

اما اگر بخواهید که شکل پیشفرض و ساده آنرا تغییر دهید باید چه کاری انجام دهید ؟

ابزاری که امروز به شما معرفی میکنم توانایی ساخت تولتیپ تنها با چند کلیک و تنظیم مقادیر را دارد.

معرفی ابزار ساخت تولتیپ

tooltip-generator-screenshot
پیش نمایش ابزار تولتیپ ساز
  1. پس زمینه: با استفاده از آن میتوانید پس زمینه تولتیپ را تغییر دهید که شامل دو بخش است:
    انتخاب کننده رنگ
    تنظیم شفافیت پس زمینه
  2. رنگ متن: رنگ متن درون تولتیپ شما را تغییر میدهد.
  3. نام فونت: فونتی که میخواهید تولتیپ شما با آن نشان داده شود. ( توجه کنید که نام این فونت باید درون قالب شما وجود داشته باشد در غیر این صورت فونت اجرا نمیشود )
  4. پدینگ: فاصله محتوای تولتیگ از داخل آن را تعیین میکند.
  5. لبه ها: میزان گردن بودن لبه تولتیپ را تعیین میکند.
  6. عرض حاشیه: میزان ضخامت حاشیه را تعیین میکند.
  7. نوع حاشیه: نوع بردری ( Solid, Dashed, Dotted ,…) که میخواهید استفاده کنید را تغییر میدهد.
  8. رنگ حاشیه: رنگ حاشیه تولتیپ را مشخص میکند.
  9. نهایت عرض: مشخص میکند که عرض تولتیپ شما تا چه اندازه میتواند باشد. در صورتی که متن داخل زیاد باشد تبدیل به متن چند خطی خواهد شد.

بعد از تغییر تنظیمات بر اساس شکل قالب، تمامی المان هایی که دارای تگ title باشند درون سایت شما تغییر خواهند کرد و به شکل پیش نمایش در خواهند آمد.

بعد از تغییرات دکمه ساختن را بزنید تا کدی برای شما ساخته شود، سپس آن را درون قالب خود قبل از تگ footer بگذارید.

توجه داشته باشید: کدها حتما باید قبل از تگ </body> فراخوانی شود در غیر اینصورت کد شما کار نخواهد کرد.

در صورتی که میخواهید امکاناتی به ابزار اضافه شود، یا مشکلی در هنگام کار با ابزار دارید از طریق فرم نظرات همین مطلب آنرا با ما در میان بگذارید به سرعت به آن پاسخ میدهیم.

بزودی ویدئویی برای ساخت تولتیپ با CSS نیز درون سایت اسکینچه منتشر خواهد شد.

ممنون از همراهیتان، تا درودی دیگر بدرود. ❤️

تصویر پروفایل احمدرضا ابراهیمی
احمدرضا ابراهیمی

عاشق طراحی وب و برنامه نویسی و مدام در حال بروز کردن اطلاعات. گیمر و دوست دار موسیقی و کتاب. هدف از ایجاد اسکینچه بوجود آوردن محیطی برای آموزش طراحی وب و برنامه‌نویسی اصولی کد هایی که به سختی داخل محیط گسترده یافت میشن امیدوارم از گذروندن وقتتون داخل اسکینچه لذت ببرید

دیدگاه ها
مشترک شدن
اطلاع از
guest
0 دیدگاه‌ها
بازخورد درون خطی
مشاهده تمامی دیدگاه ها