I want to change the color of the BootStrap tooltips and and make the text to be left aligned. I checked other post, but none of the css changes works for me. I am wondering how to change the css of tooltip text message?
HTML code for tooltips:
<button type="button" class="btn btn-lg btn-info bottom-right-2" data-html="true"
data-toggle="tooltip" data-placement="left" title="text text">
First, make sure there is a space on the left side of the button enough for the tooltip. Otherwise, it will be placed on the right side.
to change the color
/* to change the arrow background */
.tooltip > .arrow:before{
border-left-color: lightblue;
}
.tooltip > .tooltip-inner {
color: darkblue;
background-color: lightblue;
}
please take a look at bootstrap markup for the tooltip: https://getbootstrap.com/docs/4.5/components/tooltips/#markup
see the example:
https://jsfiddle.net/au4pjwf6/
Related
I am using bootstrap 5.0 (the one that can import from inline html) to create a toggle outline button like below.
<button type="button" class="btn btn-outline-dark" data-bs-toggle="button" autocomplete="off" aria-pressed="false" >{{mode}} Mode</button>
In first click, color change instantly from transparent to fill.
But the issue is, if i click the second time, the toggle button don't instantly change the color from fill to transparent. You have to click elsewhere to let it change back to transparent.
How can I make the color change from fill to transparent instantly after the click instead of the need to click somewhere else?
You mean like this?
styles.css
.btn-check:focus + .btn-outline-dark,
.btn-outline-dark:focus {
box-shadow: none !important;
}
.btn-check:focus + .btn,
.btn:focus {
outline: 0;
box-shadow: none !important;
}
forked stackblitz
Here is a screenshot of what is showing up on my webapp right now. It is supposed to be an add button, and the button functionality is there, but for some reason the image itself isn't showing up:
I am not sure if this would be an issue with what I am doing in my HTML or in my CSS, and have never really seen this problem before.
The HTML code relevant to this:
<button md-button class="add-btn" aria-label="add">
<md-icon class="jf-add"></md-icon>
</button>
CSS:
.add-btn {
text-transform: none;
color: #007ab4;
> span {
padding-left: 4px;
vertical-align: sub;
}
}
Did you define the material design in your module?
Example:
angular.module('buttons', ['ngMaterial'])
Also does not look like you defined the src of the icon in your button
Example:
<md-icon md-svg-src="img/icons/cake.svg"></md-icon>
I am using a bootstrap button on a page of my website and I want to change the color of a disabled button. A button that is "grayed out" and you cannot click. Is there a way I can change the color of this using CSS? Any class for this?
Thank you very much!
In case your button look like this:
<button class="btn btn-primary" disabled>Button</button>
the next CSS code will change its color (when disabled only):
.btn.btn-primary[disabled] {
background-color: #00ff00;
}
or
.btn.btn-primary:disabled{
background-color: #00ff00;
}
If I understand your question correctly; you need to use :disabled.
Here is a working code:
#work {
width: 200px;
height: 50px;
color: black;
}
#work:disabled{
background-color: red;
}
<button id="work"disabled="true" type="submit">Button </button>
I had to do this because I was disabling the button in javascript.
var button = document.querySelector("#button");
button.disabled = 'disabled';
button.setAttribute("style", "background-color: #799b48");
I used this guide to customize buttons in a web page I've made with bootstrap:
Change hover color on a button with Bootstrap customization
The problem is that I can't manage to keep the same font-color in hover and I can't explain why it always changes to dark grey.
Here's the code: http://codepen.io/anon/pen/ByKZZK
HTML:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<button href="mailto:abc#def.ghi" class="btn btn-custom btn-lg btn-block">info#mail.org <span class="glyphicon glyphicon-envelope"></span></button>
CSS:
.btn-custom {
color: #FFD180;;
background-color: #483737;
border-color: #357ebd; /*set the color you want here*/
}
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom {
color: #FFD180;
background-color: #837171;
border-color: #837171; /*set the color you want here*/
}
Any ideas?
Just add !important; to the color: #FFD180 in the hover part of your CSS.
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom {
color: #FFD180 !important;
background-color: #837171;
border-color: #837171; /*set the color you want here*/
}
Edit: The color (#333) probably comes from this line in the bootstrap.min.css
.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}
Seems like some way the .btn class of bootstrap is getting more weight on your codepen, you can try to avoid the !important making more specific your selector like:
.btn.btn-custom
Check the Codepen
I'm unable to line up three buttons in boostrap button group.
1) I have btn-group and three buttons inside
2) Second and third button sometimes is disabled (logic for enable/disable is written inside knockout model, but it is not important here)
3) Second button has tooltip, so I created tooltip-wrapper for button, because disabled buttons cannot have tooltips (from Bootstrap documentation http://getbootstrap.com/javascript/:
"Tooltips on disabled elements require wrapper elements To add a
tooltip to a disabled or .disabled element, put the element inside of
a and apply the tooltip to that instead."
4) I have added container for wrapper div as per deocumentation:
Tooltips in button groups and input groups require special setting
When using tooltips on elements within a .btn-group or an
.input-group, you'll have to specify the option container: 'body'
(documented below) to avoid unwanted side effects (such as the element
growing wider and/or losing its rounded corners when the tooltip is
triggered).
Unfourtunately after this:
a) the order of third and second button changes.
b) three buttons doesn't look like a btn-group
I am unable to find a solution or an idea what to try. Changing button order doesn't help.
Here is html and JS fiddle link (http://jsfiddle.net/rRLB4/):
P.S. Please, note that in JS Fiddle I have removed all spaces, enters and tabs in HTML and I do not TidyUp, otherwise there appears some empty spaces and btn-group is not lined up.
<div class="btn-group">
<button data-toggle="modal" data-target="#portfolioEditModal" data-bind="click: triggerFileUpload, clickBubble: false" class="btn btn-primary">Import</button>
<div class="tooltip-wrapper" data-toggle="tooltip" data-container="body" data-placement="bottom" data-original-title="Enter data!">
<button data-bind="click: trySave, clickBubble: false" class="btn btn-primary" disabled="">Save</button>
</div>
<button class="btn btn-primary" data-bind="click: showSaveAsDialog, clickBubble: false" disabled="">Save As</button>
</div>
You need to set the .tooltip-wrapper to float left like buttons do in a button group and adjust the border radius of the button inside the wrapper. Something like this should work:
.tooltip-wrapper {
display: inline-block;
float: left;
}
.tooltip-wrapper .btn {
border-radius: 0;
}
.tooltip-wrapper:first-child .btn {
border-radius: 3px 0 0 3px;
}
.tooltip-wrapper:last-child .btn {
border-radius: 0 3px 3px 0;
}
Here's your example updated: http://jsfiddle.net/sxqDt/12/
//test you css code
.tooltip{
dislay:none !important;
}
//if you use tooltip and this code copay paste your source css
//when use tooltip
.tooltip{
position:fixed !important;
}
.tooltip-inner {
padding:5px;
color:#FFFFFF !important;
font-size: 12px !important;
max-width:250px !important;
text-align:justify !important;
word-break: break-all;
}