fgm
/
js__bootstrap_demos


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<!DOCTYPE html>
<html lang="en">
<head>
  <title>Blasting off with Bootstrap</title>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
  <!--[if lt IE 9]>
  <script src="../js/html5shiv.3-7-0.js"></script>
  <script src="../js/respond.1-4-2.min.js"></script>
  <![endif]-->
</head>

<body>
<div class="container">
  <!-- data-placement: top, bottom, left, right, auto -->
  <button class="btn btn-default tooltipbutton"
          data-target="tooltip" data-placement="bottom"
          title="I am a <em>Bootstrap</em> button. Notice the italics." >
    Who am I ?
  </button>
</div>

<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
<script src="../js/jquery-1.11.2.min.js"></script>
<script src="../js/bootstrap.js"></script>

<script type="text/javascript">
  var options = {
    // Defaults to false
    animation: true,

    // A CSS selector, often "body". Unclear?
    // container: "body",

    // In msec. This is a delay, not a fade duration.
    delay: 1000,

    // Defaults to false
    html: true,

    // Can be used instead of data-placement attribute
    // placement: "top", "bottom", "left", "right", "auto"

    // CSS selector for child elements of the target on which to apply the tooltip
    // selector: 'a[href="hello.html"]'

    // Can be used instead of title attribute
    title: "Another way to set the tooltip text"

    // Defaults to "hover". Click is better on non-clickable elements.
    // trigger: "click" "focus", "hover", "manual"
  };

  // Also possible: options = "show"|"hide"|"toggle"|"destroy"
  $(document).ready(function() {
    $('.tooltipbutton').tooltip(options);
  });

  $(".tooltipbutton").on("show.bs.tooltip", function() {
    console.log('Showing tooltip');
  });
  $(".tooltipbutton").on("shown.bs.tooltip", function() {
    console.log('Tooltip shown');
  });
  $(".tooltipbutton").on("hide.bs.tooltip", function() {
    console.log('Hiding tooltip');
  });
  $(".tooltipbutton").on("hidden.bs.tooltip", function() {
    console.log('Tooltip hidden');
  });

</script>
</body>
</html>