We Keep Coding

Bootstrap Button Hover issue

When I hover over a bootstrap button on my website it doesn't show the link in the bottom left corner in chrome. Am I missing something here? Here is the code I am currently using for the button.
<button type="button" class="btn btn-primary navbar-btn m-l-15 m-r-15" onclick="location.href='{$relative}/upload'">{translate c='menu.upload'}</button>

You can use an <a> element with a role of button and style it to look like a button but using the same classes that you are currently using.
Only caveat to this would be that you should determine the correct element to use in your situation - for example - a link (a element) should navigate you to a new location or context - whilst a button should be used if it does something in the same location / context.
Also - if the bottonhad other functionality that navigating to the desired location - you will need to re-introduce the click handler and apply logic to perform that function.
<a
href="{$relative}/upload"
role="button"
class="btn btn-primary navbar-btn m-l-15 m-r-15"
>{translate c='menu.upload'}</a>

You can replace it with a link , and style it.
Have a visit to Bootstrap website and you will find Details here.

You can put your link as follows and it may solve your problem
<a href="your_link_here">
<button type="button" class="btn btn-primary navbar-btn ml-5 mr-5">
{translate c='menu.upload'}
</button>
</a>

First change the margin-left and margin-right from m-l-15 and m-r-15 to ml-1 and mr-1. In bootstrap ml and mr class only take values from 1 to 5. It don't takes the values more than 5 in class. You have to give it to css.
Try This:
<a role="button" class="btn btn-primary navbar-btn ml-5 mr-5"
href="{$relative}/upload">{translate c='menu.upload'}</a>

How to create a bootstrap popover within a bootstrap dropdown?

I created this so far using html, bootstrap, and jQuery v1.12.0, and jQuery UI - v1.10. So far what displays is a button that says "menu". Once you click that button, menu will drop down and display a right-aligned box that says "Popover with data-trigger". Once that happens, I want to be able to click the "Popover with data-trigger" button to popover something using bootstrap. I tried using the onclick stuff, as shown in jquery, but it isn't working. What am I doing wrong?
$(".dropdown-menu").css('margin','50px');
$(function () {
$('[data-toggle="popover"]').popover()
})
$("#popoverData").popover({ trigger: "hover" });
<div class="btn-group" style ="left:1860px;top:-140px;">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</button>
<div class="dropdown-menu dropdown-menu-right" style="background: rgba(0,0,255,.35);">
<a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
</div>
</div>

Actually, I figured out the answer...The thing is I had the right code...
I forgot to put $(document).ready(function() {}); surrounding my popover code, so the code wouldn't run. I think this has something to do with the DOM not being ready? Correct me if I'm wrong guys. This code should work for jquery.
$(document).ready(function() {
$(".dropdown-menu").css('margin','50px');
$(function () {
$('[data-toggle="popover"]').popover()
})
$("#popoverData").popover({ trigger: "hover" });
});

Bootstrap: Collapse and Tooltip together

I want to know if its possible to have tooltip on a collapse anchor tag. The code which is use for collapse is:
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Data</a>
It works fine but now I want to add a tooltip to it. So I changed the code to:
<a data-toggle="collapse tooltip" title ="Tooltip Message" data-parent="#accordion" href="#collapseOne">Data</a>
Now it shows the tooltip but the collapse function does not work. What changes I have to do so that both functionality works. I know the text of anchor tag can actually show the message I want to use as tooltip message but just want to know if its possible to have both functionality together

From the Bootstrap Javascript overview page:
Component data attributes
Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.
Try this:
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span data-toggle="tooltip" title="Tooltip Message">Data<span>
</a>

Another solution is to change trigger for tooltip. Default trigger is:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Which will work like this:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
But you can change it to:
$(function () {
$('[data-tooltip="true"]').tooltip()
})
Which will work like this:
<button type="button" class="btn btn-default" data-tooltip="true" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

Jquery selecting for button

I have a a list that is generated via PHP and SQL and within each styled row I have a favorite button. I want it so when I click the favorite button it toggles a class that changes the color of it.
It works for the first one but any other button in my list doesn't work.
<button id="favorite" type="button" class="btn btn-xs btn-success" title="Follow">
<span class="glyphicon glyphicon-star"></span>
</button>
<script>
$("#favorite").click(function() {
$(this).toggleClass('clicked');
});
</script>
I looked on similar questions before posting but I didnt see anything related to what I'm trying to accomplish and even google didn't really help me. I'm sure this is a simple task. I'm fairly new to JQuery

If you change your id to a class, your code should work fine:
<button class="favorite btn btn-xs btn-success" type="button" title="Follow">
<span class="glyphicon glyphicon-star"></span>
</button>
<script>
$(".favorite").click(function() {
$(this).toggleClass('clicked');
});
</script>

You are using the same ID for multiple elements. Add a class of favourite and try doing this instead:
$(".favorite").click(function() {
$(this).toggleClass('clicked');
});

how to prevent button inner span tag unclickable or unresponsive when button clicked?

I'm having a problem with a button I have created, basically when I click the button it appears to be very unresponsive only firing about 50% of the time. At the moment I have a span tag inside the button and I think that maybe this is having an effect on the button click. Would this be right and if so what would be the best way to prevent the span being clicked?
Button markup:
<button class="btn view-newest btn-inverse is-active">
<i class="icon icon-star"></i>
<span>Click the button</span>
</button>
What I then have is a simple .on click event?

The <span> tag shouldn't be interfering with the jQuery click event listener if this is all the code you've got; it doesn't do anything fancy.
Here's a JSFiddle demonstrating this:
<button class="btn view-newest btn-inverse is-active">
<i class="fa fa-star"></i>
<span>Click the button</span>
</button>
<div id="timesClicked">Times clicked: </div>
<script>
clicked = 0;
$(".btn").on('click', function() {
clicked++;
$("#timesClicked").text("Times clicked: " + clicked)
});
</script>
I'd check the console for errors, make sure that there's only one event listener and that it's being called in the right place, and check to see if there's any loose Javascript or CSS rules affecting the button.