tyb-code17.3.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Tooltip on a Button</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    body { padding-top: 70px; }
    img#dandylionLogo { height:100%; width: auto; display: inline; margin-top: -10px; }
    </style>

  </head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsedNav">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand"><img src="images/dandylion-logo.png" alt="Dandylion" id="dandylionLogo" />Dandylions</a>
        </div>
        
        <div class="collapse navbar-collapse" id="collapsedNav">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Support</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">About <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Articles</a></li>
            <li><a href="#">Related Sites</a></li>
          </ul>
          </li>
          </ul>
          <p class="navbar-text">We love <a href="" class="navbar-link">Weeds</a>!</p>
          <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
          </form>
          <button type="button" class="btn btn-default navbar-btn navbar-right">Contact Us</button>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="row">
      <article id="mainarticle" class="col-lg-5 col-md-6 col-xs-12">
        <h3>What is a Dandelion?</h3>
        <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
        <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in
        the family Asteraceae. They are native to Eurasia and North and South
        America, and two species, T. officinale and T. erythrospermum, are
        found as weeds worldwide. Both species are edible in their entirety.
        The common name <span class="pronounce"><strong>dandelion</strong>
        <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French
        dent-de-lion, meaning "lion's tooth") is given to members of the
        genus, and like other members of the Asteraceae family, they have very
        small flowers collected together into a composite flower head. Each
        single flower in a head is called a floret. Many <em>Taraxacum</em>
        species produce seeds asexually by apomixis, where the seeds are
        produced without pollination, resulting in offspring that are
        genetically identical to the parent plant.</p>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-trigger="click" title="Everyone should love Dandelions!">Click if you love Dandelions</button>
      </article>
      <aside id="links" class="col-md-3 col-xs-12">
        <h3>Learn More About Dandelions</h3>
        <ul>
          <li><a href="http://chemistry.about.com/b/2013/07/26/do-dandelions-burn-in-colors.htm">Do Dandelions Burn in Colors?</a></li>
          <li><a href="http://herbgardens.about.com/od/herbrecipes/tp/10-uses-for-dandelions.htm">Top 5 Things To Do With Dandelion</a></li>
          <li><a href="http://organicgardening.about.com/od/howtogrowveggies/a/How-To-Grow-Dandelion-Greens.htm">How to Grow and Harvest Dandelion Greens</a></li>
          <li><a href="http://homecooking.about.com/od/condimentrecipes/r/bljelly9.htm">Dandelion Honey Recipe</a></li>
          <li><a href="http://landscaping.about.com/od/weedsdiseases/a/kill_dandelions_2.htm">Get Rid of Dandelions the Smart Way&#8212;Eat Them!</a></li>
        </ul>
      </aside>
      <aside id="sidebar" class="col-lg-3 col-md-3 col-xs-12">
        <p><img src="images/dandy.jpg" class="img-responsive" alt=""/></p>
        <p><img src="images/seeded.jpg" class="img-responsive" alt=""/></p>
      </aside>
      <footer class="col-xs-12">
        <p>Text from 
        <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
      </footer>

      </div>
    </div>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
  $(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });
});
</script>
</body>
</html>