I have tried using the example code that is provided by the Twitter Bootstrap docs,
Hover over me
and although I do get the hover over effect, it doesn't look like the pretty version that bootstrap provides. I have tried looking this up in Google and Stack Overflow, but most of them offer solutions on how to customize the look of the tooltip. I would just like to use the default look bootstrap provides.
Any thoughts on why mine may be looking like the screenshot below?
Clear your cache.
Make sure bootstrap.min.css file reference is not broken or other files.
Go to your dev tool and verify if there are specifics errors we can go over.
Make a prototype using the same conditions as your example so that you can identify your
problem clearly.
Use this. Also check using inspect element that your customised classes are not overriding the default CSS.
<a class="btn btn-default" data-toggle="tooltip" data-placement="left" title="first tooltip" data-original-title="first tooltip">Hover over me</a>
also make sure you are adding the correct bootstrap css and javascript seems like either you don't have them or their path is wrong
Related
I'm looking for an AngularJS carousel module that can mimic exactly the visual format of this picture:
I tried using https://mihnsen.github.io/ui-carousel/ but got errors:
https://github.com/mihnsen/ui-carousel/issues/35
I just need something that works well in AngularJS and visually mimics the picture. Any suggestions?
Have you tried this one? It seems that he's using just bootstrap and some CSS to do it.
//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js
It also shows the scope variables that he uses to get the carousel configured. It's not exactly the same, but it's the closer I found. If it's not what you want, you can do little CSS changes to look like the picture (:
I've found this template and used it with success:
bootsnipp.com/snippets/featured/simple-carousel
I just had to make minor css adjustments and used data-target="#Carousel" instead of href="#Carousel" in the controls.
I was reading the bootstrap api for tooltip. I built a grid of buttons and I want to be able to have a tooltip show when I do a mouseover of a button.
Problem
See the picture. This is the normal grid.
Look at the picture below. Notice how all the buttons got pushed to the right and left side and the tooltip appeared. This is not the desired behavior.
Code (see it for yourself in plunker link)
I have a plunker that you can see here the demonstrates the entire problem. Mouse over second row button to see all hell break loose.
The HTML code for the button that I can use tooltip on looks like this:
<button type="button" class="btn btn-default bin-well bin-col-5" data-toggle="tooltip" data-placement="top" title="Tooltip on left"></button>
I have added the following javascript after reading in the boostrap api that there is an issue with btn-group type stuff. I added the following:
$('.btn-group').tooltip({'container':'body', 'placement':'top'});
It creates the exact same issue. Really scratching my head.
Summary
This doesn't make any sense to me. I thought the entire point of tooltip was to have additional content sit on top of the DOM objects behind it? Not push objects out of the way?
I was wondering if it has to be because of the data-toggle attribute fighting my toggleClass javascript? No way, right? So I tried to use tooltip without having the data-toggle attribution, but I cannot invoke the tooltip without this component.
I have also done a ton of googling and everything I read has indicated that I should not be experiencing this problem and it should be working out of the box.
If anyone with much more experience could help point me in the right direction, I would very much appreciate it. I have spent some time on this and I feel like this right now.
NOTE
I am using IE Explorer to show this behavior. This is important because my clients use IE.
Here's the working plunk : http://plnkr.co/edit/THgloUwFUDkpv5odRGYv?p=preview
Change your javascript to
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
EDIT: Keep in mind this answer was asked before Bootstrap 2 came out and therefore is relative to the first release
I am trying to dynamically add and show Bootstrap modal windows with AJAX content, but after looking at the documentation for a good hour and a half I dont understand what classes or attributes I need to add to my modal div so they work with the modal API.
Right now I have something like this:
var $modalWindow = $('<div />', {
class: 'modal fade static',
style: "display: none;",
text: "Test"
});
$('body').append($modalWindow);
$modalWindow.modal('show');
And it doesnt work... Maybe I am being dense, but I cannot find any info on the docs about how to setup my modal window before calling the show method.
Edit: Fixed it, apparently bootstrap-modal.js requires bootstrap-tipsy.js and bootstrap-popover.js, although it is not mentioned anywhere in the documentation. Seriously, Bootstrap has the worst documentation, specially considering how popular it is.
Fixed it, apparently bootstrap-modal.js requires bootstrap-tipsy.js and bootstrap-popover.js, although it is not mentioned anywhere in the documentation. Seriously, Bootstrap has the worst documentation, specially considering how popular it is.
EDIT: Before downvoting this answer, consider this was before bootstrap 2, and as another commenter said he had the exact same issue and also solved it by adding tipsy and popover.
Boostrap 2 is way better than its first incarnation, BTW
I have a Google Custom Search I'm using for a site I'm working on (the search is restricted to this one site). As part of the results you can specify "refinements". These refinements appear as tabs but I want them to appear as links. I do not see anyway to control this nor do I find anything in the docs about how to control this. Anyone have any experience with this?
On Google's own examples they appear as links, like so: http://code.google.com/intl/en/apis/customsearch/images/refine_treatment.png
However all I can get are tabs, like so:
http://2.bp.blogspot.com/_HUb2ygrQR50/TCHcpRiZS8I/AAAAAAAAEPc/m9R1yA2lZaw/s1600/SupportLineRefinement.png
How can I control this?
Actually, I do not think it is possible to do this. I think the tabs are your only option.
The reason why you see links in the google example, is because it's the old version, similar to the iframe option. You're using the new search element.
As far as making them into links, not hard to do using some CSS with !important, to make them look like links.
How do you make an HTML button behave just like a hyperlink where, if you click on it, it will open a browser window showing a page you want?
I understand this much. I think I will use this
but instead of a link to some javascript code inside the quotes for "onclick" I want to put something simple that will launch a new browser window.
onclick and window.open
<input type="button" onclick="window.open('http://www.example.com','_blank','resizable=yes')" />
In Head:
<script>
openNewWindow = function()
{
window.open(url, "_blank");
};
</script>
In Body:
<input type="button" onclick="openNewWindow()" >
I prefer to define a function named openNewWindow() instead of putting the code in the input tag. This is for organization. I highly recommend you do this if you're planning on having many different buttons for opening different windows.
I think this is the best solution for you.
Try this out
<a href="http://www.stackoverlfow.com" target="_"><input
type="button" value="Click Me"/></a>
Happy Coding!!
You could do something like this:
window.open(url, "window-name", "menubar=no,innerWidth=600,innerHeight=600,toolbar=no,location=no,screenX=400,screenY=40");
Passing a name to the open method causes the browser to open a new window. The third argument defines the looks of the new window.
<input type="button" value="Google"
onclick="window.open('http://www.google.com', '_blank');" />
I'm 7 years late, I realize, but I had a similar issue and thought I comment for those who may follow.
If you're using Bootstrap, you can attach Bootstrap button classnames to anchor tags and make them look just like buttons:
I Look Like A Button
Bootstrap supports basic sizes as well, including btn-sm or btn-lg. Granted, not everyone uses Bootstrap but even then the default styles are free, easy to find, and can be copied into your own stylesheet even if you're using a custom boilerplate layout.
I've seen a lot of conflicting information regarding Content Security Policies. The primary recommendation from Google's developer site, web.dev is found here => https://web.dev/strict-csp/#what-is-a-strict-content-security-policy.
There are several professional level recommendations stating that a CSP should be used. I write HTML sites, right now, but intend to move to Angular and/or React. In the meantime, the recommendation is that a js script be used to get the element id and forward via the script, rather that using a link.
The justification for this is that cross scripting attackers can use the vulnerability of these elements when the "onclick," or related commands, are used. This removes the vulnerability.
I would recommend approaching it from a CSP point of view and following the linked guidelines to make your site compliant with W3 and Google recommendations.