Bootstrap Tooltips - not working at all - javascript

I'm trying to implement bootstrap tooltips on my site - you'd think it would be easy enough, but something is not working correctly - the bootstrap tooltip is not functioning.
I'm calling all the right scripts, stylesheets and javascript - I believe. I'm following the example here: http://jsfiddle.net/TSZSL/171/ and I believe this javascript could be throwing me?
$('.example').tooltip();
Here's the page I'm referring to. I just get a regular tooltip with no bootstrap functionality.

The problem is your reference to boostrap's tooltip library. You can't link to it like that; it's not a CDN...
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>.
Use netdna's complete JS package or host the individual script yourself. See BootstrapCDN.
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Related

Do I have to create and use my own jquery script for slideToggle animation when using bootstrap offline (via npm)?

I just learned to create a website using bootstrap. I created a project using bootstrap for the appearance of the website. Initially, I used an online bootstrap to make the website display work optimally. I made a navbar with the hamburger menu, and when I clicked it the result was like this:
There is a smooth animation when I click the hamburger menu.
Then I tested the appearance of my website using offline bootstrap, and the results were like this:
There is no animation when I click the hamburger menu.
When I try to use the jquery slideToggle() script in html (I put it in html just for testing), the animation will appear like I am using an online bootstrap.
<script>
$(document).ready(function () {
$("#hamburgerMenu").click(function () {
$("#navbarTogglerDemo02").slideToggle();
});
});
</script>
Question: do I really have to implement the jquery slideToggle() script above into my javascript file or is there another way so I don't have to put the script? Because in online bootstrap I don't need to write the above script in my javascript file.
There's no reason that I can think of that the offline bootstrap should behave any differently than the online one.
I'd be curious on where did you source the two files and i'd do a comparison between the two. If it's working online, all you're doing is getting that code and minifying it for local use like so:
<link rel="stylesheet" href="css/bootstrap.min.css">
Solved! The question has been answered, although I can't solve the error.
It turns out that the online bootstrap version that I am using is version 4.0.0 (I adjusted jquery and popper.js according to the documentation) and the offline version is 4.5.2. When I tried to use online bootstrap version 4.5.2 (with jquery and popper.js which have also been adjusted), the animation also didn't work. Once I tried bootstrap version 4.0.0 offline, the animation ran normally.
I'm not sure with this answer. There may be a bug in the bootstrap. But when I tried various methods, the result was same
Result:
Bootstrap 4.0.0: animation in toggle both offline and online goes as desired (there is a smooth animation)
Bootstrap 4.5.2: animation in toggle both offline and online does not work as desired (no animation)

React - creating accordion with bootstrap doesnt expand/close on click

Iam trying to create a accordion from the bootstrap website in React. Iam following this website https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example
I copied their example code and it looks exactly just as the example on the website but the problem is when I click on the accordion nothing happends, it doesn't expand or close. Is there suppose to be a onClick function somewhere in the code that needs to be included?
you need to copy the JS as well as the css code from bootstrap lib.
i suggest to use code from my google search bellow, create a component and just adapt the css style to bootstrap
https://www.google.it/search?q=accordion+example+jsfiddle&oq=accordion+example+jsf&aqs=chrome.1.69i57j0l5.12453j0j1&sourceid=chrome&ie=UTF-8
actually is very easy to build it
Forgive me if I'm totally wrong here, as I am fairly new to web development- but I've used that accordion before and simply copying and pasting their code should do the trick, provided you have added the proper link tags from their "Getting Started" section in documentation set in your index.html (not just CSS but all of the JS links, too).
I hope this helps!!

Twitter Bootstrap Javascript - how to use only tooltip library?

I have a project that is without Twitter Bootstrap. I would like to use Tooltip, so I downloaded bootstrap-tooltip.js file, put it to the page. (there is included jQuery lib as well).
And this is how I am trying to call tooltip:
$(document).ready(function() {
$('.tooltip_link').tooltip();
});
www.something.com
But the tooltip will never appear, in console log are no JS errors. What am I missing?
Thanks
data-toggle="tooltip" maybe?
I've tried to reproduce what you have here, after inserting this I got it working (JSfiddle right here).
In the docs you've referenced there's the following code:
hover over me

how to embed codes on html pages

I'm on windows and I want to create a web-based code snippet tool for my own consumption. Because every awesome app seems to exist only on mac. Snippley is ok, but it doesn't have a search functionality.
Is there a javascript library or a jquery plugin that allows me to present code snippets in a nice way? Something like the one in Nettuts:
The most beautiful and most used i guess is the Google code Prettify.
It's a css library for doing exactly this screenshot you paste.
http://code.google.com/p/google-code-prettify/
you can use it with Twitter Bootstrap Css library too with Google Code Prettify: http://twitter.github.com/bootstrap/
Check the page source of Twitter Bootstrap and you gonna see that you need only something like this:
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
Or you can choose between 16 free javascript code protiffiers here: http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/
and that's it!

jQuery simple dialog not working

I'm trying to figure out why my jQuery dialog is not working properly on this page:
http://bit.ly/nOKwYz
This is the code snippet:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#dialog22").dialog();
});
</script>
and I also have:
<div id="dialog22">test</div>
For some reason it does not load the dialog, any ideas?
It's gotta be the library order. See this fiddle. Your sample works just fine if you have the library order right:
http://jsfiddle.net/mikethomsen/a25gw/
The way it works is you need to load jQuery.js, jQuery UI's JS and then the jQuery UI CSS, then throw in your custom code.
Edit
I replaced my fiddle's libraries with your sample and Firefox says jQuery('#dialog').dialog is not a function. That means you are missing the dialog code from the build of jQuery UI you made. You need to go back to the jQuery UI site and build a new distribution of jQuery UI that includes the other pieces you need.
To show the dialogo you should first hide it i think:
<div id="dialog22" style="display:none;">test</div>
and then show it with a button for example
EDIT - look at the fiddle here : http://jsfiddle.net/LCPJe/
Where do you load jQuery (and jQuery UI) on that page? You need to reference those libraries in the page (specifically before any code that uses them). Unless I'm just not seeing the reference, you do have quite a few script tags in the header.
You don't have to host a copy, though. You can reference a CDN link.

Categories