I've just recently started using bootstrap and am working on part of my Christmas present to my girlfriend - a puzzle for her to figure out what her real present is (tickets to Hamilton in London).
However, I've run into an issue with the bootstrap tooltips. I'm expecting to see a tooltip next to the span word that is clicked, on hover or click. But for some reason the tool tip is up in the top-left of the body.
Could anyone help me out here?
Here is a pen that shows the error:
Link to CodePen
I'm using the suggested example of initializing with:
$("[data-toggle='tooltip']").tooltip();
Try using the same version of Bootstrap. Either go for v3 or v4 completely. The problem should be resolved once you use compatible files.
Related
Im trying to implement a bootstrap thumbnail slider, there should be 4 tiles showing and with a click of the arrow it advances by 1 thumbnail. There are lots of examples of these available online however after trying to implement about 5 of them, I have the same problem with them all.
For some reason the slider only shows a single thumbnail when I copy all code and run it myself, I am used to using bootstrap normally can sort little issues, however this is just not making any sense to me.
This is the example I have implemented on my own private site, : http://www.bootply.com/94452
Here is a screen shot of how it looks for me :
Here is an entire cut off all code used on the example :
pastebin.mozilla.org/8972187
All code is exactly the same, however it just does not work, if anything else if needed from me to help resolve this, please let me know.
Thankyou very much for any help
There are a few problems with the code..
jQuery 1.7.1 is very old, use 1.9.1 or later.
You've included bootstrap.js and jquery.js twice, and they should only be included once
http://www.codeply.com/go/60oCFBwyPk
I've been working on making a map related visualisation in D3 for a site that for historical reasons is stuck using some old versions of jQuery, and I've come across a weird bug when implementing drag behaviour on the map.
I've extracted the D3 code, and put it onto a gist listed below, and been able to replicate the strange behaviour, which you can trigger by:
Try loading the page below
Clicking on a country
Trying to select some text
I can't seem to select text after I've zoomed into a country, and I suspect it's down to line 130 in the d3_map.js file
The problem gist
The gist is here:
https://gist.github.com/mrchrisadams/89d053977513e6042adf
The rendered gist on http://bl.ocks.org, is here:
http://bl.ocks.org/mrchrisadams/89d053977513e6042adf
On the strange mismatch of javascript libraries
It's strange to see such an old version of jQuery, I know. I'm unable to change it without breaking other functinality on the site, which is why we're stuck with the old library.
Why is this happening, and how do I reinstate normal text selection again?
I'm utterly stumped as to why triggering a zoom knocks out the ability to select text, and I'd welcome any pointers, because I'm somewhat at a loss now.
Oh well, fingers crossed...
I've a problem with my portfolio and the mixitup to filter the article in the section. I don't know if the problem is that the grid div is not a top level element or that i use section and articles instead of a ul - li list. I've done the GettingStarted http://mixitup.io/#Documentation on there Website several times but I don't find the issue with my code. Have a look at my code here. I found a working example here! Cheers
The problem of your jsfiddle example is, that there is no jQuery defined.
In the top left corner of site please choose jquery version in this block: "Frameworks & Extensions". 1.11.0 version is nice with it.
But if you meaned that your sorting doesn't work fine, so please synchronise your "data-filters" with classes in blocks.
For example:
Lalala
This will be shown when Lalala pressed.
Data-filter = selector of the class you should put near "mix" class.
Best regards, Hope you'll make it work! :)
I'm trying to get JPlayer's nice looking Circle Player:
http://jplayer.org/latest/demos/
to work with Bootstrap3. It works with Bootstrap 2.3.
There appears to be an incompatibility. It sure would be great if anyone knows how to fix it, or could find it. I think that this will probably affect others as well.
I haven't been able to find a solution online.
Here are some details:
1. Circle player works correctly when bootstrap is not loaded.
2. Circle player works correctly when the following is included:
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
3. Circle player does not display properly when the following is included:
//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
Circle Player itself includes the following libraries:
jquery.transform2d.js, jquery.grab.js, mod.csstransforms.min.js, circle.player.js
Using the following Bootstrap 3 theme:
https://wrapbootstrap.com/theme/3-in-1-admin-front-end-e-commerce-WB0G69690
I just ran into this, and found that it's because Bootstrap 3 applies "box-style: border-box" with the universal selector * (See the Release Notes). Just apply "box-sizing: content-box;" to .cpContainer and it will look as expected.
I am using highchart inside facebox to draw a chart. I can see the x-axis, y-axis, but not the values.. If I select the entire chart by dragging mouse, I can see the values. Which means that for some reason the chart is not being drawn. What could be the problem ?
Also I have a facebook login inside facebox, I can see the login button, but it does not work. Whereas similar login button on the main page works fine.
I tried my highchart code in jsfiddle, it works fine.
Here is how am I using facebox,
comp.append(hTag);
$('#statLeftRightId').append(comp);
jQuery.facebox({ div: '#statLeftRightId' });
I had a similar problem with HighCharts 2.2.1 and jQuery 1.7.1. I found that using jQuery 1.6.1 drew the charts.
As the answer to this thread indicates, there are some problems with jQuery 1.7.1. So I doubt this is a facebox problem.