Tooltip های ساده با Bootstrap

کدهای زیر نحوه ایجاد Tooltip های ساده با استفاده از فریمورک Bootstra می باشد .

bootstrap-tooltip-example

ابتدا می بایست کدهای زیر را به قسمت head صفحه خود بیفزاید :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
      $(".tooltip-top").tooltip({
          placement : 'top'
      });
      $(".tooltip-right").tooltip({
          placement : 'right'
      });
      $(".tooltip-bottom").tooltip({
          placement : 'bottom'
      });
      $(".tooltip-left").tooltip({
          placement : 'left'
      });
  });

برای استفاده :

<ul class="list-inline">
    <li><a href="#" data-placement="top" data-toggle="tooltip" class="tooltip-top" data-original-title="Tooltip on top">Tooltip on top</a></li>
    <li><a href="#" data-placement="right" data-toggle="tooltip" class="tooltip-right" data-original-title="Tooltip on right">Tooltip on right</a></li>
    <li><a href="#" data-placement="bottom" data-toggle="tooltip" class="tooltip-bottom" data-original-title="Tooltip on bottom">Tooltip on bottom</a></li>
    <li><a href="#" data-placement="left" data-toggle="tooltip" class="tooltip-left" data-original-title="Tooltip on left">Tooltip on left</a></li>
</ul> 


توسط : عثمان رحیمی  2 ماه قبل ، یکشنبه 6 مهر 1393 ساعت 21:07  0  4051

نظر شما برای ما مهم است و به ما در بهبود سایت کمک میکند.


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط