I have a tooltip, and I want to change his background. The default background is black.
<ng-template #start>Start</ng-template>
<button [ngbTooltip]="start" type="button" class="btn btn-outline-danger">
<i class="fa fa-play" aria-hidden="true"></i>
</button>
Could you, please, help me with this?
There need to be couple of css changes,
Check stackblitz demo Here
You need to add below css to the root style file. Replace red with your desired color.
/* Add application styles & imports to this file! */
.tooltip-inner{
background-color: red!important;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before{
border-right-color:red!important;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before{
border-left-color:red!important;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before{
border-top-color:red!important;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before{
border-bottom-color:red!important;
}
In your HTML, add tool-tip-btn to your button’s class attribute, making it like this:
class="btn btn-outline-danger tool-tip-btn"
Then in your CSS, refer to that class:
.tool-tip-btn {
background-color: #ccc;
}
Its define in their OFFICIAL DOC Here
<button type="button" class="btn btn-outline-secondary" ngbTooltip="Nice class!"
tooltipClass="my-custom-class">
Tooltip with custom class
</button>
and in you TS
styles: [`
.my-custom-class .tooltip-inner {
background-color: darkgreen;
font-size: 125%;
}
.my-custom-class .arrow::before {
border-top-color: darkgreen;
}
`]
and the link for more info
You can write a class (e.x tool-info-class) and add on your tooltip
.tool-info-class .tooltip-inner {
background-color: #fff;
}
tooltipClass="tool-info-class"
An example https://stackblitz.com/edit/angular-yo7esv
Below has worked for me earlier
::ng-deep .tooltip-inner {
background-color:#707070!important
}
Related
I like the style of the default buttons from pre-Bootstrap 4. In order to try to make my own I came up with the following SASS:
.btn-default {
#extend .btn;
border-color: #A5A5A5;
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
color: #808080;
}
This works as expected if I used a <button> tag but not if I use a <a> tag. Why wouldn't this work on both?
<a href="#" class="btn btn-default">
Test Anchor
</a>
<button type="submit" class="btn btn-default">
Test Button
</button>
Why would this not work on the anchor tag when you can normally assign a .btn class to an anchor tag and it will style it like a button?
I don't think you need to #extend .btn since you're already using .btn.
All the other btn-* variations have a color, background-color and border-color, so in CSS you could create a btn-default with:
.btn-default{
color:#333;
background-color:#bbb;
border-color:#a5a5a5
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
color: #808080;
}
The Bootstrap SASS way would be to use the button-variant #mixin...
.btn-default {
#include button-variant(#bbb, #a5a5a5, #bbb, darken(#bbb, 10%), darken(#bbb, 10%), darken(#bbb, 12.5%))
}
Demo: https://www.codeply.com/go/CWJidmeI1D
Here are the params for the button-variant mixin:
button-variant($background, $border, $hover-background, $hover-border, $active-background, $active-border)
<a> tag doesn't have the behavior of a button. Inorder make it try the following code
a.btn{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
I styled my button everything is cool but can't change the blue color on click.
<button type="button" class="btn btn-primary">Log In</button>
.btn.btn-primary:focus {
background-color: and here color
}
doesn't work
The hover state has priority over the active or focus. You can see it on the snippet as both element has a color change for active, but only on for hover.
.btn:active { background-color: red }
.btn.btn-primary:hover { background-color: green }
<button type="button" class="btn btn-primary">With hover</button>
<button type="button" class="btn btn-secondary">No hover</button>
To solve this, you need to specify the order, and be clear in your selectors.
hover selector needs to be before the active selector.
.btn.btn-primary:hover { background-color: green }
.btn.btn-primary:active { background-color: red }
<button type="button" class="btn btn-primary">Button</button>
You need to override each pseudo-selector for the button that you want to change.
If you want to avoid using !important, then you are going to need to override a couple more selectors that Bootstraps sets. I commented these out in the snippet for simplicity's sake.
.btn.btn-primary {
background-color: orange
}
.btn.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
background-color: orange !important;
}
/*
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
background-color: orange;
}
*/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-primary">Log In</button>
Use
.btn:active {
background-color: red;
}
What is the correct way to change the color of a button ?
My button :
<button id="easy_mode" href="#gameZone" class="btn waves-effect waves-light spacing theme-color" >
Theme color:
.theme-color {
background-color: #ee6e73;
}
.theme-color:hover {
background-color: #F18B8F;
}
the button loses the color after it has been clicked. What am i missing ?
It seems to be working fine. I'm guessing you made a small PEBKAC mistake somewhere. Might want to check your HTML and CSS real quick to see if there are no typos anywhere.
.theme-color {
background-color: #ee6e73;
}
.theme-color:hover {
background-color: #F18B8F;
}
<button id="easy_mode" href="#gameZone" class="btn waves-effect waves-light spacing theme-color">Click me!</button>
<button id="easy_mode" href="#gameZone" class="btn waves-effect waves-light spacing theme-color" >text</button>
.theme-color {
background-color: #ee6e73;
border:none;
cursor:pointer;
}
.theme-color:hover {
background-color: #ffffff;
border:none;
cursor:pointer;
}
Try these html and css codes
You can check here
https://jsfiddle.net/kyfycnn7/
I would like to style each letter of the word SEND separately. I can't insert HTML into the value field, and I would prefer not to use an image.
<input type="submit" value="SEND" />
I simply would like each letter to be a different color. Do you have any suggestions? Thank you.
Use Lettering.js (http://letteringjs.com/)
It allows you to style each letter according to the CSS specification which isn't fully implemented in browsers.
Check http://codepen.io/FWeinb/pen/djuIx for example, e.g.
And in addition, use button instead of input:
<button type="submit">SEND</button>
button::first-letter {
color: red;
}
EDIT: I created an ugly hack with HTML+CSS only by using button element with span elements: http://cssdeck.com/labs/apkycgyi
<button type="submit">
<span>S</span>
<span>E</span>
<span>N</span>
<span>D</span>
</button>
button {
font-size: 0px;
}
button > span {
font-size: 16px;
}
button span:nth-of-type(1) {
color: red;
}
button span:nth-of-type(2) {
color: blue;
}
button span:nth-of-type(3) {
color: green;
}
button span:nth-of-type(4) {
color: yellow;
}
I couldn't find out how to add the pseudo :hover to the "Font-awesome" icons (fa-fa icons).
If somebody could help i would be greatly appreciative.
HTML:
<i class="fa fa-user fa-2x" style="margin-top:10px;"></i><br />
<i class="fa fa-level-up fa-2x" style="margin-top:10px;"></i>
CSS:
.overview, .tier {
color: black;
}
a:hover {
color: red;
}
The code you posted works, but it'll also color any text that contains. If you want to apply the color only when you hover the icon, put it on the class fa like you did with the a tag.
.fa:hover {
color: red
}
or if you want to specify it per icon:
.fa-level-up:hover {
color: blue;
}