I'm playing around with Twitter Bootstrap's Tooltips, but am having problems since they moved away from Twipsy. The correect JavaScript is included in the page.
Let's say I have the following:
<p>hover on me</p>
What is the exact JavaScript I need to use to make the tooltip appear?
Thanks in advance!
Vanessa
You need to explicitly run .tooltip() for all elements that have to have tooltip. For example, this will work:
<span rel="tooltip" title="tooltip text">some text</span>
...
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[rel=tooltip]").tooltip();
});
</script>
For your example it will just be:
$('a').tooltip();
but according to the documentation, you should use the title attribute, not data-original-title. That attribute is added by Bootstrap's tooltip code. Also there is no need for rel="tooltip".
Your code should be:
HTML:
hover on me
JS:
$("a").tooltip(); // this will trigger a tooltip on all <a> elements
In Bootstrap, We need to manually initialize Tooltips
its mentioned in their Documentation also.
<script type="text/javascript">
$(function () {
$("[data-toggle='tooltip']").tooltip();
});</script>
you need exactly to
<script src="bootstrap-tooltip.js "></script>
<script>
$(function (){
$('a').tooltip();
});
Related
Hi is there any possibility to load this page to div?
connectis.pl/connectis.pl/index.php
I tryied this way but seems to not load the data.
<div id="siteloader"></div>
$("#siteloader").html('<object data="ger-pol.home.pl/connectis.pl/index.php" />');
http://jsfiddle.net/SsJsL/
With jquery you can do it like this...
$("#siteloader").load("http://ger-pol.home.pl/connectis.pl/index.php");
Edit: Make sure your jquery functions are wrapped in the document ready wrapper...
<script type="text/javascript">
$(document).ready(function(){
$("#siteloader").load("http://ger-pol.home.pl/connectis.pl/index.php");
});
</script>
Or the shorthand...
<script type="text/javascript">
$(function() {
$("#siteloader").load("http://ger-pol.home.pl/connectis.pl/index.php");
});
</script>
I tried your fiddle and it works just fine..
Might be that you forgot the script tag?
<script>
$("#siteloader").html('<object data="http://ger-pol.home.pl/connectis.pl/index.php"/>');
</script>
Here's JSFIDDLE
How do I change the below javascript to change my css class, rather than add/append to it?
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('ul#horizontal.nav.menu').addClass('myNewClass');
});
})(jQuery);
</script>
EDIT
I am trying to change the following UL:
<ul class="nav menu" id="horizontal">
to
<ul class="myclass" id="horizontal">
I have tried the following just before my closing </body> tag and not working:
<script type="text/javascript">
(function($){
$(document).ready(function(){
// add items for bootstrap dropdown's
$("#horizontal").attr("class", "myclass");
})(jQuery);
</script>
You can try to use attr method:
$('ul#horizontal.nav.menu').attr( 'class', 'myNewClass');
Quite easy..
$("#mydiv").attr("class", "myclass");
$("#mydiv").prop("class", "myclass");
I can't hide my div using some i.e. explode effect in jquery ui, It always slides down (or something like that), whatever effect I put as parameter in my code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
$(document).ready(function(){
$('.rozwin').click(function(){
$('#main').hide('explode');
$('#main').show('explode');
});
<a href="" class="rozwin>hide and show</a>
<div id='main'>...</div>
There's quite a bit wrong with this code.
This script src is missing the http:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
You do not start your javascript with a <script type="text/javascript">, so all of your jQuery is interpreted as plain text.
$(document).ready(function(){
You are not preventing the default action of the click.
$('.rozwin').click(function(){
$('#main').hide('explode');
$('#main').show('explode');
});
You do not enclose your .ready()...
Your anchor tag's class has no closing quote.
<a href="" class="rozwin>hide and show</a>
<div id='main'>...</div>
Here's the snippet with all the fixes it needs.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.rozwin').click(function(e){
e.preventDefault();
$('#main').hide('explode');
$('#main').show('explode');
});
});
</script>
hide and show
<div id='main'>...</div>
Keep in mind that your show events won't work as expected because they're triggering too quickly, since you're not using it in the callback of .hide().
http://jsfiddle.net/zq2Hz/
first line missed http:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
and missed the end of $(document).ready(function(){
$(document).ready(function(){
$('.rozwin').click(function(){
$('#main').hide('explode');
$('#main').show('explode');
});
}); //at the end
you missed closing braces and close quotes for class
$(document).ready(function(){
$('.rozwin').click(function(){
$('#main').hide('explode');
$('#main').show('explode');
});
});
hide and show
I am new to javascript and jquery. I want to use $(document).ready to register some event handlers. For example, code like this, and my question is what javascript libraries do I need to refer to at the head of the page in order to use $(document).ready? Appreciate if anyone could provide me a simple easy to use sample to learn $(document).ready.
<script>$(document).ready(function()
{
// function implementation internals
});
</script>
thanks in advance,
George
All you need is the jQuery library.
http://www.jquery.com
You can either download the library and include it from your own server or you could use one of the many CDN's which provide the library. For instance:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// do something useful
});
</script>
Google keeps copies of a bunch of libraries on their servers, which are pretty reliable.
Just add the following to your <head> section, and place your snippet somewhere below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
In summary,
Put the <script> tag provided by sje397 in the <head> section of the page, which provides the only library you need... jQuery.
(Alternatively: <script src="http://code.jquery.com/jquery-1.4.4.js" type="text/javascript"></script>)
Read http://docs.jquery.com/Tutorials:How_jQuery_Works
And you should be good to go.
<html>
<head>
</head>
<body>
<div id="someElement">Click Me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#someElement').bind('click', function(event) {
// event.preventDefault(); // you might want to do this if your event handler has a default action associated with it (e.g. a link that gets clicked with an href)
// do stuff on your event (change click to whatever you need)
});
});
})(jQuery);
</script>
</body>
</html>
I have many lines on my page generated from database with PHP. Each line is in DIV. I'd like to "select" a line by clicking on it. "Select" means change css for it. What is the easiest way to do it?
smarter way is to use js frameworks, like jQuery:
<div id="alldivs">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<!-- you don't need to download anything, just add this line ;-) -->
<script>
$(function(){
$("#alldivs div").click(function(){
$("#alldivs div").removeClass('clickedCss');
$(this).addClass('clickedCss');
});
});
</script>
You could do just a onclick event and change the css class;
<div class="yourCss" onclick="this.className='clickedCss';">content</div>