it seems that there is an error in Botstrap documentation. following code is not working
<a href="#" rel="tooltip" title="first tooltip">hover over me</a> this code is working OK <a href="#" class="hasTooltip" title="first tooltip">hover over me</a> пятница, 24 февраля 2012 г., 20:09:17 UTC+4 пользователь Alexander написал: > > Hi friends, > > I tried out all the functions of bootstrap and I have the following > problems: > > 1. Carousel: > - Only 2 items possible > - no "back" function with a click on the arrow > > 2. Tooltip: > - no graphics, just the normal tooltip > > 3. Dropdown: > - 2 arrows? > > Thanks for your help and your hints. > Here's the code: > > <!DOCTYPE html> > <html lang="de"> > <head> > <meta charset="utf-8"> > <title>...</title> > <meta name="viewport" content="width=device-width, initial- > scale=1.0"> > <meta name="description" content=""> > <meta name="author" content="Alexander"> > > <!-- Le styles --> > > <link rel="stylesheet" href="http://twitter.github.com/bootstrap/ > 1.4.0/bootstrap.min.css"> > > <link href="./css/bootstrap.css" rel="stylesheet"> > <style type="text/css"> > body { > padding-top: 60px; > padding-bottom: 40px; > } > .sidebar-nav { > padding: 9px 0; > } > </style> > <link href="./css/bootstrap-responsive.css" rel="stylesheet"> > > <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> > <!--[if lt IE 9]> > <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></ > script> > <![endif]--> > > <!-- Le fav and touch icons --> > > <link rel="shortcut icon" href="images/favicon.ico"> > > <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> > <link rel="apple-touch-icon" sizes="72x72" href="images/apple- > touch-icon-72x72.png"> > <link rel="apple-touch-icon" sizes="114x114" href="images/apple- > touch-icon-114x114.png"> > </head> > > <body> > > <div class="navbar navbar-fixed-top"> > <div class="navbar-inner"> > > <div class="container"> > > <a class="btn btn-navbar" data-toggle="collapse" data- > target=".nav-collapse"> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > </a> > <a class="brand" href="#">MY TEST</a> > > <div class="nav-collapse"> > <ul class="nav"> > > <li class="active"><a href="#">Startseite</a></li> > > <li class="dropdown" id="menu1"> > > <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> > Lernmodule > <b class="caret"></b> > </a> > > > <ul class="dropdown-menu"> > <li><a href="#">Modul 1</a></li> > <li><a href="#">Modul 2</a></li> > <li class="divider"></li> > <li><a href="#">Modul 3</a></li> > <li class="divider"></li> > <li><a href="#">Modul 4</a></li> > > </ul> > > </li> > > <li><a href="#about">Über das Projekt</a></li> > <li><a href="#contact">Kontakt</a></li> > </ul> > </div><!--/.nav-collapse --> > > </div> > > </div> > > </div> > > <div class="container"> > > <!-- Main hero unit for a primary marketing message or call to > action --> > <div class="row"> > <div class="span8"> > <div class="hero-unit"> > > <h1>Herzlich Willkommen!</h1> > <p>Auf diesem Online-Portal erleben Sie dies und das.</p> > <p><a class="btn btn-primary btn-large">Mehr darüber »</ > a></p> > > </div> > </div> > <div class="span4"> > <div class="well"> > > <div id="myCarousel" class="carousel"> > <!-- Carousel items --> > <div class="carousel-inner"> > <div class="item active"> > <img src="./img/mw_01.picture.jpg" alt=""> > <div class="carousel-caption"> > <p>Bild 1</p> > </div> > > </div> > <div class="item"> > <img src="./img/mw_02.telefon.jpg" alt=""> > <div class="carousel-caption"> > <p>Bild 2</p> > </div> > </div> > <div class="item"> > > <img src="./img/mw_03.papagei.jpg" alt=""> > <div class="carousel-caption"> > <p>Vielfalt, Spontanität, Kreativität und > Innovationen</p> > </div> > </div> > <div class="item"> > <img src="./img/mw_04.chor.jpg" alt=""> > <div class="carousel-caption"> > > <p>Bild 4</p> > </div> > </div> > <div class="item"> > <img src="./img/mw_05.kinder.jpg" alt=""> > <div class="carousel-caption"> > <p>Von Kindern lernen und etwas Sinnvolles > weitergeben</p> > </div> > > </div> > <div class="item"> > <img src="./img/mw_06.weg.jpg" alt=""> > <div class="carousel-caption"> > <p>Wir helfen bei Entscheidungen</p> > </div> > </div> > <div class="item"> > > <img src="./img/mw_07.spruch.jpg" alt=""> > <div class="carousel-caption"> > <p>Do it!</p> > </div> > </div> > </div> > <!-- Carousel nav --> > <a class="carousel-control left" href="#myCarousel" data- > slide="prev">‹</a> > > <a class="carousel-control right" href="#myCarousel" data- > slide="next">›</a> > </div> > > </div> > </div> > </div> > > > <!-- Example row of columns --> > <div class="row"> > <div class="span4"> > > <h2>Musiktheorie</h2> > <p>Blablabla...auf dem <a href="#" rel="tooltip" title="Ein > Klavier hat 88 Tasten.">Klavier</a> erklingen. Auch Eure Ideen werden > mit einbezogen. </p> > <p> > <a href="#" class="btn btn-danger" rel="popover" > title="Wirklich!" data-content="So einfach geht es an dieser Stelle > weiter. Klicken bitte!">Hier geht's weiter »</a> > </p> > > </div> > <div class="span4"> > <h2>Terminabsprachen</h2> > <p>Donec id elit non mi porta gravida at eget metus. Fusce > dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut > fermentum massa justo sit amet risus. Etiam porta sem malesuada magna > mollis euismod. Donec sed odio dui. </p> > <p><a class="btn" href="#">View details »</a></p> > </div> > <div class="span4"> > > <h2>Kommunikation</h2> > <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis > in, egestas eget quam. Vestibulum id ligula porta felis euismod > semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris > condimentum nibh, ut fermentum massa justo sit amet risus.</p> > <p><a class="btn" href="#">View details »</a></p> > </div> > </div> > > <hr> > > <footer> > <p>© Company 2012</p> > </footer> > > </div> <!-- /container --> > > <!-- Le javascript > ================================================== --> > > <!-- Placed at the end of the document so the pages load faster -- > > > > <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/ > jquery.min.js"></script> > > <script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap- > twipsy.js > <http://twitter.github.com/bootstrap/1.4.0/bootstrap-twipsy.js>"></script> > > <script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap- > popover.js<http://twitter.github.com/bootstrap/1.4.0/bootstrap-popover.js>"></script> > > > <script type="text/javascript"> > (function() { > $("[rel=popover]").popover(); > })(); > </script> > > <script type="text/javascript" src="http://platform.twitter.com/ > widgets.js <http://platform.twitter.com/widgets.js>"></script> > <script src="./js/jquery.js"></script> > <script src="http://twitter.github.com/bootstrap/js/google-code- > prettify/prettify.js<http://twitter.github.com/bootstrap/js/google-code-prettify/prettify.js>"></script> > > > > <script src="./js/bootstrap-transition.js"></script> > <script src="./js/bootstrap-alert.js"></script> > > <script src="./js/bootstrap-modal.js"></script> > <script src="./js/bootstrap-dropdown.js"></script> > <script src="./js/bootstrap-scrollspy.js"></script> > <script src="./js/bootstrap-tab.js"></script> > > <script src="./js/bootstrap-tooltip.js"></script> > <script src="./js/bootstrap-popover.js"></script> > > <script src="./js/bootstrap-button.js"></script> > <script src="./js/bootstrap-collapse.js"></script> > <script src="./js/bootstrap-carousel.js"></script> > <script> > $(document).ready(function() { > // set up the Carousel with no additional options > $('#Carousel').carousel(); > }); > </script> > > <script src="./js/bootstrap-typeahead.js"></script> > <script src="http://twitter.github.com/bootstrap/js/ > application.js > <http://twitter.github.com/bootstrap/js/application.js>"></script> > > > </body> > </html>
