سلام دوستان. توی این مطلب آموزش کار با پلاگین Tooltip بوت استرپ رو به اشتراک گذاشته ایم. در این قسمت میخوام بپردازم به آموزش ساخت Tooltipدر فریم ورک بوت استرپ. همان طور که میدونید tooltip باکس های کوچیکی هستند که غالبا فقط حاوی متن اند و وقتی ظاهر می شوند که شما روی آیتم مورد نظر در صفحه وب، موس خود را Hover کنید. در واقع از Tooltipها برای نمایش متن های کوچیک استفاده می کنند و اگر شما بخواهین که علاوه بر متن ، عکس هم داشته باشین و یا شکل ظاهری دیگری رو داشته باشین میتونید از Popover ها استفاده کنید. اگر درباره Popover ها اطلاعاتی ندارین میتونید به آموزش ساخت Popover مراجعه کنید و باهاش آشنا بشین. با ما همراه باشید لطفا…
آموزش کار با پلاگین Tooltip بوت استرپ
پلاگین تولتیپ یک جعبه پاپ آپ کوچک است که وقتی کابر اشاره گر موس را بر روی یک عنصر یا لینک خاص حرکت میدهد نشان داده میشود
نکته : پلاگین ها را میتوان به صورت جداگانه (توسط فایل بوت استرپ جداگانه ) tooltip.js و یا به صورت یکجا ( با استفاده از bootstrap.js و یا bootstrap.min.js اضافه کرد.
نحوه ساخت تولتیپ :
برای ایجاد یک تولتیپ خاصیت data-toggle=”tooltip را به یک عنصر اضافه کنید.
از خاصیت title برای مشخص کردن متنی که باید در تولتیپ نمایش داده شود استفاده کنید.
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
نکته : tooltip باید توسط جی کوئری آغاز شود : عنصر مخصوص را انتخاب کنید و متد tooltip() را فراخوانی نمایید.
کد زیر تمام تولتیپ های درون یک سند – داکیومنت را فعال میکند :
<script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>
موقعیت یابی تولتیپ
به صورت پیش فرض تولتیپ در بالای عنصر مورد نظر قرار میگیرد. از خاصیت data-placement برای تنظیم موقعیت تولتیپ در بالا ، پایین ، چپ و راست عنصر استفاده کنید .
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a> <a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a> <a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
نکته : همچنین میتوانید از خاصیت data-placement با مقدار auto استفاده کنید که که در این صورت مرورگر شما خودش موقیعت تولتیپ را تنظیم میکند .
برای مثال اگر مقدار auto left باشد تولتیپ در صورت امکان در سمت چپ نمایش داده خواهد شد و در غیر این صورت در سمت چپ نشان داده میشود .
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۲۸ مهر ۱۳۹۵
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس