Tooltip (hint) e popover

<< Click to Display Table of Contents >>

Navigation:  Bootstrap >

Tooltip (hint) e popover

 Previous pageReturn to chapter overviewNext page

Tela

 

bootstrap21

Fonte

 

<!DOCTYPE html>

<html>

<head>

  <link href="css/bootstrap.min.css" rel="stylesheet">

  <link href="css/bootstrap-responsive.min.css" rel="stylesheet">

  <style>

       

  </style>

</head>

<body>

  <div class="container">

      <div class="row">

          <div class="span12">

              <h2>

                   ToolTipo</h1>

                  <div class="row">

                      <div class="well">

                           texto texto texto <a href="#" title="primeiro" rel="tooltip">texto</a> texto texto

                           texto texto <a href="#" title="jeronimo" rel="tooltip">texto</a> texto texto texto

                          <a href="#" title="bosque" rel="tooltip">texto</a>

                      </div>

                  </div>

          </div>

      </div>

      <div class="row">

          <div class="span12">

              <h2>

                   Popover</h1>

                  <div class="row">

                      <div class="well">

                          <a href="#" class="btn btn-danger" rel="popover" title="titulo do pop over" data-content="conteudo do popover">

                               Botão pop (clique)</a>

                      </div>

                  </div>

          </div>

      </div>

  </div>

</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js"></script>

<script language="javascript">

   $(function () {

       $("a[rel=tooltip]").tooltip();

       $("a[rel=popover]").popover();

   });

</script>

</html>