matori73 3 ارسال شده در تیر 31، 1393 گزارش اشتراک گذاری ارسال شده در تیر 31، 1393 درود ! استفاده از تولتیب به منظور نمایش اطلاعات اضافی و توضیحات بیشتر پیرامون متن ، لینک و تصاویر می باشد که به سادگی جهت بهبود بخشیدن و ارائه مطالب مفید کاربری دارد بدون اینکه مزاحمتی بر روی طراحی سایت ایجاد کند ! ... و اما آموزش ؛ ابتدا یک لینک ایجاد کنید و به آن کلاس tooltip بدید : <a title="تولتیپ مورد نظر شما" class="tooltip">متن مورد نظر شما</a> خوب، مرحله بعدی هم تعریف استایل برای تولیتپ هست : .tooltip{ display: inline; position: relative;} ساختار خطی ساده لینک را ایجاد کردیم، الآن باید باکس توضیحات که در هنگام رفتن روی لینک در بالای لینک نمایش داده می شود، بسازیم : .tooltip:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px;}[right][/right] استفاده از عبارت زیر در استایل جهت نمایش توضیحات اضافی می باشد : content: attr(title); تا به اینجای کار، تقریبا تعریف و آماده سازی تولیپت هم تمام شده ! ما یک بار آن را در فایل CSS می آوریم و بار دیگر آن را در فایل HTML فراخوانی می کنیم پس لینکی را که در بالا قرار دادیم باید اصلاح بشه، مگه نه <a href="https://go.20script.ir/index.php?url=لینک مورد نظر شما" title="تولتیپ مورد نظر شما"><span title="More">متن مورد نظر شما</span></a> در نهایت برای نمایش بهتر و شاخص تر شدن لینک به باکس توضیحات ، استایل خاصی هم به لینک می دهیم تا مشخص تر به نظر برسد . در اینجا یک فلش رو به پایین را در زیر باکس ایجاد می کنیم تا کار جلوه بهتری داشته باشد ! # تاکید میکنم که این امر اختیاری هست ! .tooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99;} در آخر یک نکته رو هم متذکر بشم ؛ # برای قرار دادن تولتیپ عکس هم می توانید از Alt استفاده کنید و توضیحات را در هر جا که خواستید نمایش دهید . موفق باشید لینک به دیدگاه به اشتراک گذاری در سایت های دیگر More sharing options...
پست های پیشنهاد شده