BootStrap JavaScript not working?

I don't see anything in the markup or the CSS that applies to the link that would produce a tooltip.  What code do you think is supposed to produce it?

Cd&

You have to add the jquery too.  Take a look at the example http://getbootstrap.com/javascript/#tooltips

Those examples are using the following jquery

 // tooltip demo
    $('.tooltip-demo').tooltip({
      selector: "[data-toggle=tooltip]",
      container: "body"
    })

    $('.tooltip-test').tooltip()
    $('.popover-test').popover()

    $('.bs-docs-navbar').tooltip({
      selector: "a[data-toggle=tooltip]",
      container: ".bs-docs-navbar .nav"
    })

Select allOpen in new window

I have included the latest version of jQuery and BS JS in my source:

		<!-- Optional theme -->
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" type="text/css">
		<!-- Load latest jQuery -->
		<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
		</script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript">
		</script>

Select allOpen in new window

I don't see your jquery code

It is here:

		<!-- Load latest jQuery -->
		<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
		</script>

Select allOpen in new window

I don't see your jquery code.... for the tooltip

Please  look back at my answer here http:Q_28259134.html#a39550022

You have to both the html and jquery to make it work.  Not just "jquery"

The HTML in the docs is

<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

Select allOpen in new window

however if you hover over the text, it only shows an alt.

Change

<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

Select allOpen in new window

to

<a class="test" href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

Select allOpen in new window

Change this

<!-- Optional theme -->
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" type="text/css">
		<!-- Load latest jQuery -->
		<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
		</script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript">
		</script>

Select allOpen in new window

to

<!-- Optional theme -->
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" type="text/css">
		<!-- Load latest jQuery -->
		<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
		</script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript">
		</script>
<script>
// Add the jquery to call the tooltip
$(function() {
$('.test').tooltip();
});
</script>

Select allOpen in new window

Thanks, but if you go to here you can see that upon hover, the tooltip goes from way on top and lags the browser. What's wrong here? Is there any way to include all the jQuery?

It works in both chrome and firefox as expected.  You do have some coding errrors to tend to such as unclosed tags.  http://validator.w3.org/check?uri=http%3A%2F%2Fdicehub.com%2Fjoin&charset=%28detect+automatically%29&doctype=Inline&group=0

Clean that up first or try again with very basic code.  As example I created the same html and jquery just for the tool tip , http://jsbin.com/upeMUcE/1/edit?html,js,output

See if this works as expected.

My JS Is

$('.ttl').tooltip();

Select allOpen in new window

and my HTML is

<a href="#" data-toggle="tooltip" class="ttl" title="first tooltip">hover over me</a>

Select allOpen in new window

However when I hover over, I only get an alt.

My ultimate goal is to get the tooltip to show on focus in a form like so:

http://jsfiddle.net/N9vN8/1/ (found on StackExchange, somehow it's not working anymore).

Try this with updated files http://jsbin.com/OKiZUgO/1/edit?html,js,output


html

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>Padas Experts Exchange</title>
</head>
<body>
  <a href="#" data-toggle="tooltip" title="first tooltip">tooltip on link </a><br/>
<input data-toggle="tooltip" title="tooltip on input!" type="text" placeholder="Hover me!" name="firstname"/>
<br/>
<input data-toggle="tooltip" title="tooltip on second input!" type="text" placeholder="Focus me!" name="secondname"/>
</body>
</html>

Select allOpen in new window

jquery

$('a').tooltip({placement: "bottom"});

$('input[type=text][name=firstname]').tooltip({
    placement: "bottom",
    trigger: "hover"
});

$('input[type=text][name=secondname]').tooltip({
    placement: "right",
    trigger: "focus"
});

Select allOpen in new window

somehow it's not working anymore

That site is 40% unanswered Qs; 20% incorrect answers; 15% broken threads (like the missing fiddle) and 25% actual answers which is frequently just cut and paste from other sites or out of date.

Cd&

Yes, in this case it was out of date causing broken fiddle.  That is why I try and make it a habit to post the code I am using and not just link to fiddle or jsbin.

I tried it on JSBin and it works fine. However, when accessed through this page it does not work.

<script type="text/JavaScript">
$('input[type=text][name=secondname]').tooltip({
    placement: "right",
    trigger: "focus"
});
</script>
<input data-toggle="tooltip" title="tooltip on second input!" type="text" placeholder="Focus me!" name="secondname"/>

Select allOpen in new window

I'm getting an error, "This webpage has a redirect loop" and can't get in to dicehub.com

My apologies, it is back up now.

I followed your instructions and placed:

<script type="text/JavaScript">
$('#example').tooltip(options)
</script>

Select allOpen in new window

Also, I've set the id to "formtt". This is the result (the issue I was having at the beginning). I think there's something else wrong, because although the modal is working (click sign in at the top right), the mobile menu is not. To see what I mean, resize your browser to small and you will see BootStrap transforming to responsive, however you cannot collapse the menu.

EDIT: Changed the jQuery to:

<script type="text/JavaScript">
$('#formtt').tooltip(data-placement="right" data-trigger="focus")
</script>

Select allOpen in new window

however still does not work. Is there a way to not have to include the jQuery every page?