Bootstrap Button Hover issue - javascript

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>

Related

button href not working

<button type="submit" class="btn btn-primary submitSignUp" >Sign Up</button>
Why does this not work? I have a different page called signUp and on-click of the sign-up button, I want it to go to the signUp page.
You should not place <button> inside <a> element as <button> consumes mouse events preventing <a> element click generation.
So try just this
Sign Up
to have the same result I would suggest you to change your code to this:
<a class="btn btn-primary submitSignUp" href="signUp.html">Sign Up</a>

Show tooltip on button click

I currently have the accessible tooltip working on hover. https://jsfiddle.net/lakenney/c1rogqxw/
<!-- Alert -->
<button class="btn btn-xs btn-info gly-radius" data-toggle="tooltip" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span>
<!-- Alert -->
</button>
Now I want to get it to work on Click. I'm following Julien Vernet's example except that I added accessibility markup. https://themeavenue.net/show-hide-element-onclick-using-boostrap-jquery/
... oh and I'm using button instead of href
This is what I have so far:
<button class="btn btn-xs btn-info gly-radius" data-toggle="tooltip" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span>
<!-- Alert -->
</button>
$('[data-toggle="tooltip"]').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
https://jsfiddle.net/lakenney/c1rogqxw/4/
Add the "trigger" option to your original code:
$(function () {
$('[data-toggle="tooltip"]').tooltip({ trigger: 'click' });
});
jsfiddle
In your second fiddle, you are no longer calling .tooltip() on the button element. You must call that function to instrument the tooltip. By default the tooltip is triggered by hovering over the button. You can change that by providing an options object to the call to .tooltip(). Specifically, you can include the "trigger" option.
You need to do popover instead of tooltip
<button class="btn btn-xs btn-info gly-radius" data-toggle="popover" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" data-content="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span>
<!-- Alert -->
</button>
Js code
$('[data-toggle="popover"]').popover();
here is the updated fiddle
https://jsfiddle.net/c1rogqxw/5/

Pop a temporary window with buttons next to clicked element in AngularJS

I have a page (using Bootstrap and AngularJS) with several instances of the same button, each instance relates to a particular element the button is next to.
I want to implement a temporary window that will pop as soon as I click on one of the instances and will include a number of buttons.
For instance, imagine a table with data, each record showing different status and hence the options that will be offered will depend on the status of the record. Also, at the right of each record there is a button giving access to the possible actions on the record. Whenever I click on a button, a small window needs to be shown next to the clicked button showing the applicable actions (e.g. "Delete", "Activate", "Retire", etc.).
The size of the temporary window will adjust according to the number of buttons shown.
I found a nice solution (at least, it very well complies with my needs). It is a bootstrap dropdown button into which it is possible to embed a dynamic list of buttons (again, depending on the contents of the record in my example).
So, the HTML would look like:
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<button ng-if="Delete" type="button" class="btn btn-warning" ng-click="Delete($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Delete </font></button>
<button ng-if="Retire" type="button" class="btn btn-warning" ng-click="Retire($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Retire </font></button>
<button ng-if="Activate" type="button" class="btn btn-warning" ng-click="Activate($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Activate</font></button>
<button ng-if="Promote" type="button" class="btn btn-warning" ng-click="Promote($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Promote </font></button>
</div>
</div>
Thanks to those that posted suggestions.
<td style="position:relative">
<button>
button to be clicked
</button>
<div style="position: absolute; display:inline-block; /*width, height, top, bottom*/ these option you need to set">
option1 option 2 option 3
</div>
</td>
On click of the button hide/show this div. Because the div-Element is absolute to its parent container, it will be always near the button if you give proper attributes.

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>

How can I enable two buttons clickable?

I'm using the jQuery plugin called "sidr" (http://www.berriart.com/sidr/)
This plugin enables implementation of side menu.
With these code below, only the 1st button is clickable and working fine.
However, I want to enable both of these buttons to open side menu.
How can I modify my code?
Menu Part
<div id="sidr">
...Menu Contents here...
</div>
1st button
Menu
2nd button
<a id="menu" class="btn btn-primary btn-large" href="#sidr">Menu</a>
You are using the id twice, and jQuery only recorgnices the first id:
<a id="menu" class="btn btn-primary btn-large" href="#sidr">Menu</a>
you need to define another id to open the menu with both buttons
edit:
you could use the jQuery.sidr() Function to open the menus by yourself:

Categories