BootStrap JavaScript not working?

My page here has jQuery and BS JS included, however when I try adding a tooltip it doesn't work.
Andy_FangAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
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&
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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"
    })

Open in new window

0
Andy_FangAuthor Commented:
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>

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I don't see your jquery code
0
Andy_FangAuthor Commented:
It is here:
		<!-- Load latest jQuery -->
		<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
		</script>

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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"
0
Andy_FangAuthor Commented:
The HTML in the docs is
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

Open in new window


however if you hover over the text, it only shows an alt.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Change

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

Open in new window

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

Open 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>

Open 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>

Open in new window

0
Andy_FangAuthor Commented:
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?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
Andy_FangAuthor Commented:
My JS Is
$('.ttl').tooltip();

Open in new window


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

Open 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).
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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>

Open 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"
});

Open in new window

0
COBOLdinosaurCommented:
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&
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
Andy_FangAuthor Commented:
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"/>

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I'm getting an error, "This webpage has a redirect loop" and can't get in to dicehub.com
0
Andy_FangAuthor Commented:
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Place all of your jquery in the head section if that is where your other js is.   Also, your tooltip is looking for the ID example but you are not using that ID in your code.  If you are not using the id, example, remove the jquery script.
<script type="text/JavaScript">
$('#example').tooltip(options)
</script>

Open in new window

Move this just above your closing head tag
<script type="text/JavaScript">
$('input[type=text][name=secondname]').tooltip({
    placement: "right",
    trigger: "focus"
});
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Andy_FangAuthor Commented:
I followed your instructions and placed:

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

Open 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>

Open in new window


however still does not work. Is there a way to not have to include the jQuery every page?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.