I have the following code for Button
Example 1
<button type='submit' class = 'btn btn-success' name='submit'>Logout<i style='margin-left:10px;' class='fas fa-sign-out-alt' aria-hidden='true'></i></button>
Example 2
<div class='btn-group'>
<button type="submit" name="showNotBillableEntry" class="btn btn-primary" style='border-radius: 8px; '><i class='fa fa-eye' style='margin-right:10px;'></i>Not Billable Entries
</button>
</div>
But when i changes the class btn btn-primary to btn btn-outline-primary, button become grey not outline as in bootstrap reference explained. Earlier they were green in color due to class btn btn-primary.
I want to use this <button type="button" class="btn btn-outline-primary">Primary</button> but it is not working.
Referring bootstrap - https://getbootstrap.com/docs/4.0/components/buttons/
I need help in css becoz the bootstrap link says to use type='button' in place of type='submit' but i can't use that as this button contain some data to be submitted to php server.
I have also included links which are needed for use in bootstrap.
You can do it like this.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<button type="submit" class="btn btn-outline-primary" style="font-size:30px;">Primary</button>
You can modify this as per your need. This is directly from the bootstrap's stylesheet
.btn-outline-primary{color:#007bff;border-color:#007bff}
.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}
.btn-outline-primary.focus,
.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled{color:#007bff;background-color:transparent}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,.show>
.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>
.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}
I have this button:
<button type="button" style="margin-bottom: 5px;" class="btn btn-danger btn-default btn-gray btn-primary btn-primary2 btn-success2 btn-warning btn-black btn-success btn_bottom_padding" data-toggle="modal" data-target="#myModal" data-bind="css: {'btn-gray': IsGray(), 'btn-danger': IsRed(),'btn-success':IsGreen(), 'btn-primary': IsBlue(),'btn-success2':IsLimegreen(), 'btn-primary2': IsSkyblue(),'btn-warning':IsOrange(),'btn-black': IsBlack(),'btn-default':IsWhite()},click:$root.GetClick">
<span data-bind="text:ShortName()"></span>
<span data-bind="visible: IsRed()" class="fa fa-exclamation-triangle"></span>
#*<span data-bind="" class="fa fa-bolt"></span>*#
</button>
The thing is I wanted to add multiple icons to it like:
I only managed to add the exclamation triangle icon, but if I tried to add another one neither the first one would not appear. Is there any way that I can add all those four icons like in the attached button image?
Just add them in separate spans: Example
<span class="fa fa-exclamation-triangle"></span>
<span class="fa fa-bar-chart"></span>
<br>
<span class="fa fa-bolt"></span>
<span class="fa fa-ban"></span>
I want to have hotkeys using accesskey.
Let's say I have this (it's AnguarJs but that doesn't matter):
<button type="button" class="btn btn-outline btn-default"
ng-click="CancelCampaignEdit();" accesskey='n'
style="margin-right:10%">Cancel</button>
As you can see, I want to assign the hotkey n to this button. How could I underline the n in Cancel using CSS?
You can add a span tag with text-decoration:underline if you want add extra styling. Otherwise use tag
<button type="button" class="btn btn-outline btn-default"
ng-click="CancelCampaignEdit();" accesskey='n'
style="margin-right:10%">Ca<u>n</u>cel</button>
<button type="button" class="btn btn-outline btn-default"
ng-click="CancelCampaignEdit();" accesskey='n'
style="margin-right:10%">Ca<span style="text-decoration: underline;">n</span>cel</button>
I'm facing a problem with getting a button to open a popver modal when hovering over and click.
<button type="button"
class="btn btn-success btn-lg"
data-target="#addChangeModal"
data-toggle="####"
data-toggle=""
data-content="Add change">
</button>`
when I set data-toggle to
data-toggle="modal"
or
data-toggle="popover"
Both values modal and popover work perfectly.
However I am unable to set
data-toggle="modal popover"
The official answer to this from the Devs of Bootstrap:
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.
An example of this would be something like:
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span data-toggle="tooltip" title="Tooltip Message">Data<span>
</a>
credit to: Bootstrap: Collapse and Tooltip together
Launch your modal with jQuery:
$('#my-btn').click(function () {
$('#addChangeModal').modal('show');
$('[data-toggle=popover]').popover('hide'); //EDIT: added this line to hide popover on button click.
});
And then use a standard popover from Bootstrap, include data-trigger="hover" to show popover on hover.
<button id="my-btn" type="button" class="btn btn-success btn-lg" data-trigger="hover" data-original-title="Popover Title" data-content="Popover content" data-toggle="popover"></button>
Bootply Demo
Is there a way to assign more than one event to a bootstrap control via "data-toggle".
For example, lets say I want a button that has a "tooltip" and a "button" toggle assigned
to it.
Tried data-toggle="tooltip button", but only the tooltip worked.
EDIT:
This is easily "workaroundable" with
$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");
If you want to add a modal and a tooltip without adding javascript or altering the tooltip function, you could also simply wrap an element around it:
<span data-bs-toggle="modal" data-bs-target="modal">
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip">
Hover Me
</a>
</span>
Since tooltip is not initialized automatically, you can make changes in your initialization of the tooltip. I did mine like this:
$(document).ready(function() {
$('body').tooltip({
selector: "[data-tooltip=tooltip]",
container: "body"
});
});
with this markup:
<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>
Notice the data-tooltip.
Update
Or simply,
$('[data-tooltip="tooltip"]').tooltip();
I managed to solve this issue without the need to change any markup with the following piece of jQuery. I had a similar problem where I wanted a tooltip on a button that was already using data-toggle for a modal. All you will need to do here is add the title to the button.
$('[data-toggle="modal"][title]').tooltip();
This is the best solution that I just implemented:
HTML
<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>
JAVASCRIPT that you anyway need to include regardless of what method you use.
$('[rel="tooltip"]').tooltip();
Not yet. However, it has been suggested that someone add this feature one day.
The following bootstrap Github issue shows a perfect example of what you are wishing for. It is possible- but not without writing your own workaround code at this stage though.
Check it out... :-)
https://github.com/twitter/bootstrap/issues/7011
Since Bootstrap forces you to initialize tooltips only through Javascript, I changed data-toggle="tooltip" (since it's useless then) to class="bootstrap-tooltip" and used this Javascript to initialize my tooltips:
$('.bootstrap-tooltip').tooltip();
And so I was free to use the data-toggle attribute for something else (e.g. data-toggle="button").
I use href to load the modal and leave data-toggle for the tooltip:
<a
data-toggle="tooltip"
data-placement="top"
title="My Tooltip text!"
href="javascript:$('#id').modal('show');"
>
+
</a>
Just for complement #Roman Holzner answer...
In my case, I have a button that shows the tooltip and it should remain disabled until furthermore actions. Using his approach, the modal works even if the button is disabled, because its call is outside the button - I'm in a Laravel blade file, just to be clear :)
<span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}">
<button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
<i class="fa fa-trash fa-fw"></i>
</button>
</span>
So if you want to show the modal only when the button is active, you should change the order of the tags:
<span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
<button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled>
<i class="fa fa-trash fa-fw"></i>
</button>
</span>
If you want to test it out, change the attribute with a JQuery code:
$('button[name=delete]').attr('disabled', false);
One more solution:
<a data-toggle="modal" data-target="#exampleModalCenter">
<span
class="tags"
data-toggle="tooltip"
data-placement="right"
title="Tooltip text"
>
Text
</span>
</a>
There is a nice solution using class .stretched-link. Button must have a class .position-relative. Here is a full working example:
Tooltip must be added to the button otherwise its position will be incorrect.
$('[data-toggle="tooltip"]').tooltip();
/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--BUTTON-->
<button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text">
<span class="stretched-link" data-toggle="modal" data-target="#exampleModal"></span>
Click Me!
</button>
<!--DEMO MODAL-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body">Modal body</div></div></div></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
When you opening modal on a tag and want show tooltip and if you implement tooltip inside tag it will show tooltip nearby tag. like this
I will suggest that use div outside a tag and use "display: inline-block;"
<div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;">
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)">
<span class="fa fa-plus"></span>
</a>
</div>
I've also tried to use
<span></span>
but
<a></a>
worked great for me.
Here you are:
<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
<a data-bs-toggle="tooltip" title="Example">Some info here</a>
</button>
Even better, try to wrap the entire button (that uses popover) with a div:
<div data-bs-toggle="tooltip" title="Something">
<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
Button label
</button>
</div>
HTML (ejs dianmic web page): this is a table list of all users and from nodejs generate the table. NodeJS provide dinamic "<%= user.id %>". simply change for any value like "54"
<span type="button" data-href='/admin/user/del/<%= user.id %>' class="item"
data-toggle="modal" data-target="#confirm_delete">
<div data-toggle="tooltip" data-placement="top" title="Delete" data-
toggle="modal">
<i class="zmdi zmdi-delete"></i>
</div>
</span>
<div class="modal fade" id="confirm_delete" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
data-backdrop="static">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticModalLabel">Static Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
<p> This is a static modal, backdrop click will not close it. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form method="POST" class="btn-ok">
<input type="submit" class="btn btn-danger" value="Confirm"></input>
</form>
</div>
</div>
</div>
</div>
<!-- end modal static -->
JS:
$(document).ready(function(){
$('#confirm_delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('action', $(e.relatedTarget).data('href'));
});
});
<a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>