I am adding tooltip but its not working, and how I can positioning it thru jquery/js like (left, right, top, bottom)
please help me out where i am doing something wrong…
Thanks…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer · Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/ticket-style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../assets/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="../assets/css/jquery-ui.theme.css">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<style>
.typeahead, .tt-query, .tt-hint {
width: 280px;
}
</style>
</head>
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<button type="button" 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> </button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container-fluid nopadDiv">
<div class="row-fluid">
<div class="span3 leftNavContent ">
<ul class="nav nav-list nav-list_">
<div class="quickLinks">
<div class="LastloginInfo"> <strong>Last Login</strong> 9/22/2014 02:52:39 AM </div>
<ul>
<li><a href="#" class="current">Manage Tickets (198)</a></li>
</ul>
</div>
</ul>
</div>
<div class="span9 breadcrumbwrap">
<ul class="breadcrumb">
<li><a href="#">Search</a> <span class="divider">/</span></li>
<li class="active">Search Account</li>
</ul>
</div>
<div class="span9">
<div class="grayBox">
<div class="whiteBox clearfix">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="textinput">Customer Name</label>
<div class="controls">
<input id="myTypeahead" name="CustomerName" placeholder="Customer Name" class="input-xlarge" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="textinput">Account No.:</label>
<div class="controls">
<input id="accountNo" name="AccountNo" placeholder="Account No." class="input-xlarge" type="text">
<i class="icon-info-sign ml5" data-toggle="tooltip" title="first tooltip"></i>
</div>
</div>
<div class="control-group">
<label class="control-label" for="textinput">Realm:</label>
<div class="controls">
<input id="realm" name="Realm" placeholder="Realm" class="input-xlarge" type="text">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div> <!-- main container-fluid-->
<div id="push"></div>
</div>
<!-- wrap -->
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js" type="text/javascript"></script>
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/js/bootstrap-tooltip.js" type="text/javascript"></script>
<script src="../assets/js/bootstrap-typeahead.js" type="text/javascript"></script>
<script type="text/javascript" src="../assets/js/jquery_ui/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
// Define source array
var countries = ["William Pecham", "William Traver Gallery", "William Chapman", "William Morgan", "William Niestar", "William Collins", "William Furr", "Rahul Bhingare"];
// Initializes typeahead
$("#myTypeahead").typeahead({
source: countries
});
});
$(document).ready(function(){
alert('tooltip alert');
$('#element').tooltip('show')
});
</script>
</body>
</html>