I am trying to get a CSS tooltip to work correctly which I found on the thoughtbot blog. The only changes that I have made to the code is to change from Scss to CSS, and simplify the html a touch. However, when in CSS, it doesnt work.
The original article can be found here, where there is also a working codepen that I copied as the basis for my CSS version https://robots.thoughtbot.com/you-don-t-need-javascript-for-that
.container {
margin-top: 100px;
margin-left: 100px;
border: 2px solid red;
}
/* //The good stuff */
.tooltip-toggle {
cursor: pointer;
position: relative;
}
/* //Tooltip text container */
.tooltip-toggle::before {
position: absolute;
top: -80px;
left: -80px;
background-color: #2B222A;
border-radius: 5px;
color: #fff;
content: attr(data-tooltip);
padding: 1rem;
text-transform: none;
transition: all 0.5s ease;
width: 160px;
}
/*
//Tooltip arrow */
.tooltip-toggle::after {
position: absolute;
top: -12px;
left: 9px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #2B222A;
content: " ";
font-size: 0;
line-height: 0;
margin-left: -5px;
width: 0;
}
.tooltip-toggle::before {
color: #efefef;
font-family: monospace;
font-size: 16px;
opacity: 0;
pointer-events: none;
text-align: center;
}
.tooltip-toggle::after {
color: #efefef;
font-family: monospace;
font-size: 16px;
opacity: 0;
pointer-events: none;
text-align: center;
}
/* //Triggering the transition */
.tooltip-toogle:hover::before {
opacity: 1;
transition: all 0.75s ease;
}
.tooltip-toggle:hover::after {
opacity: 1;
transition: all 0.75s ease;
}
Below is my html.
<html>
<body>
<div class="container tooltip-toggle" data-tooltip="Sample text for your tooltip!>
<div class="label">Hello
</div>
</div>
</body>
</html>
So, I laughed very hard when I figured your problem out:
/* //Triggering the transition */
.tooltip-toogle:hover::before {
opacity: 1;
transition: all 0.75s ease;
}
.tooltip-toogle:hover
Obviously should be toggle, lol.
Edit: cleaned css and fixed it
.container {
margin-top: 100px;
margin-left: 100px;
border: 2px solid red;
}
/* The good stuff */
.tooltip-toggle {
cursor: pointer;
position: relative;
}
/* Tooltip text container */
.tooltip-toggle::before {
position: absolute;
top: -80px;
left: -80px;
background-color: #2B222A;
border-radius: 5px;
color: #fff;
content: attr(data-tooltip);
padding: 1rem;
text-transform: none;
transition: all 0.5s ease;
width: 160px;
}
/* Tooltip arrow */
.tooltip-toggle::after {
position: absolute;
top: -12px;
left: 9px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #2B222A;
content: " ";
font-size: 0;
line-height: 0;
margin-left: -5px;
width: 0;
}
.tooltip-toggle::before, .tooltip-toggle::after {
color: #efefef;
font-family: monospace;
font-size: 16px;
opacity: 0;
pointer-events: none;
text-align: center;
}
/* Triggering the transition */
.tooltip-toogle:hover::before, .tooltip-toggle:hover::after {
opacity: 1;
transition: all 0.75s ease;
}
Related
I wanted my button to change the background color on hover with a transition from left to right. This is what I tried:
.btn {
background-color: transparent;
transition-property: background-color, left, right;
transition-duration: 1s;
color: #007eb6;
border: 1px solid #007eb6;
&:hover {
background-color: #007eb6;
color: #fafafa;
border: 1px solid #007eb6;
}
Here is a codepen you can use (Its not mine)
The trick is to set background-position to 0% and on hover change it to 100%
<button>Bangladesh</button>
CSS Code
button {
background-color: red;
color: #fff;
border: none;
outline: none;
padding: 20px 60px;
font-size: 20px;
text-transform: uppercase;
position: relative;
z-index: 1;
cursor: pointer;
}
button::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background-color: green;
transition: .5s;
z-index: -1;
}
button:hover::before {
width: 100%;
}
I am trying to stylize the input type number. In this way: https://ant.design/components/input-number/ (first input). But without using the ant design framework. Where there are inner-spin, outer-spin I am trying add white background, gray lines and change the inner-spin color, outer-spin. Change the background color I can, but I can not spinns any more. I can not see them.
I can use the bootstrap-react framework, but I do not see such a number input
Code here: https://stackblitz.com/edit/react-cojnud
input[type=number] {
line-height: 27px;
box-sizing: border-box;
font-variant: tabular-nums;
line-height: 1.5;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: relative;
width: 100%;
height: 32px;
padding: 4px 11px;
color: rgba(0,0,0,0.65);
font-size: 14px;
line-height: 32px;
background-image: none;
-webkit-transition: all .3s;
transition: all .3s;
display: inline-block;
width: 90px;
margin: 0;
padding: 0;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
input[type=number].mod::-webkit-inner-spin-button {
width: 30px;
height: 30px;
position: relative;
display: block;
overflow: hidden;
color: rgba(0,0,0,0.45);
font-weight: bold;
line-height: 0;
text-align: center;
-webkit-transition: all .1s linear;
transition: all .1s linear;
background-color: #fff;
}
input[type=number]::-webkit-inner-spin-button:hover {
color: blue;
}
input[type=number]:hover {
border-color: #40a9ff;
border-right-width: 1px !important;
}
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background-color: white;
color: black;
}
Hy there,
try to remove -webkit-appearance: none;
And you will see the spinners again!
You won't be able to modify it across browsers. Better to use it following manner:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
.number-wrapper {
position: relative;
width: 300px;
height: 30px;
}
.number-wrapper input {
width: 100%;
height: 30px;
box-sizing: border-box;
padding-right: 18px;
text-align: right;
}
.number-wrapper .rocker {
position: absolute;
background: #FFF;
border: 1px solid lightblue;
right: 0;
padding: 2px 4px;
color: #ccc;
transition: all ease-in 100ms;
height: 50%;
box-sizing: border-box;
line-height: 12px;
cursor: pointer;
visibility: hidden;
}
.number-wrapper:hover .rocker {
visibility: visible;
transition: all ease-in 300ms;
}
.number-wrapper .rocker.up {
top: 0;
}
.number-wrapper .rocker.down {
bottom: 0;
transform: rotate(180deg);
border-bottom: none;
}
.number-wrapper .rocker:hover,
.number-wrapper .rocker:focus {
box-shadow: 0 0 4px lightblue;
}
.number-wrapper .rocker:active {
transform: scale(0.4);
}
.number-wrapper .rocker.down:active {
transform: rotate(180deg) scale(0.4);
}
<div class="number-wrapper"><span class="rocker up">^</span><span class="rocker down">^</span><input class="mod" type="text" /></div>
Try This
jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">⮙</div><div class="quantity-button quantity-down">⮛</div></div>').insertAfter('.quantity input');
jQuery('.quantity').each(function() {
var spinner = jQuery(this),
input = spinner.find('input[type="number"]'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = input.attr('max');
btnUp.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
btnDown.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
});
.quantity {
position: relative;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
-webkit-appearance: none;
margin: 0;
}
input[type=number]
{
-moz-appearance: textfield;
border-radius: 5%;
}
.quantity input {
width: 45px;
height: 35px;
line-height: 1.65;
float: left;
display: block;
padding: 0;
margin: 0;
padding-left: 20px;
border: 1px solid #eee;
}
.quantity input:focus {
outline: 0;
}
.quantity-nav {
float: left;
position: relative;
height: 40px;
}
.quantity-button {
position: relative;
cursor: pointer;
border-left: 1px solid #eee;
width: 20px;
text-align: center;
color: #333;
font-size: 13px;
font-family: "Trebuchet MS", Helvetica, sans-serif !important;
line-height: 1.7;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.quantity-button.quantity-up {
position: absolute;
height: 46%;
top: 0;
margin-top: 0px;
border-bottom: 1px solid #eee;
}
.quantity-button.quantity-down {
position: absolute;
bottom: 4px;
height: 46%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity">
<input type="number" min="1" step="1" value="1">
</div>
See Code Link
I have created the button which needs border with gradient, in order to do that I have used pseudo-elements "before" and "after"(before with gradient and after with white background color witch overlap before, ordered by z-index). The problem is that when a wrapper div has a background color, the buttons pseudo elements are getting overlapped on the active state! This can be fixed by adding z-index to 0 or 1 to wrapper div... but still, I don't like this workaround! Thanks!
https://jsfiddle.net/x0uw5et3/1/enter code here
Edit wrapper-of-wrapper class to following
.wrapper-of-wrapper {
background-color: purple;
position:relative;
z-index:-2;
}
Hey Here I have your solution your fiddle here
.wrapper-of-wrapper {
background-color: purple;
position: relative;
z-index: 1;
}
body {
background: orange;
}
.wrapper {
/* background-color: orange; */
}
.wrapper-of-wrapper {
background-color: purple;
position: relative;
z-index: 1;
}
.sf-btn {
font-family: Poppins, Helvetica Neue, Helvetica, Arial, sans-serif;
display: inline-block;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border-radius: 4px;
line-height: 24px;
border: 0;
padding: 8px 16px;
width: 100%;
-webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1);
transition: all .4s cubic-bezier(.25, .8, .25, 1);
-webkit-transition: none;
transition: none;
}
.sf-btn:focus, .sf-btn:hover {
color: #fff;
}
.sf-btn:active, .sf-btn:focus, .sf-btn:hover {
color: #fff;
}
#media (min-width: 640px) {
.sf-btn {
width: auto;
}
}
.sf-btn svg {
fill: inherit;
}
.sf-btn--secondary {
z-index: 3;
color: #262a33;
position: relative;
background-color: #fff;
font-weight: 600;
outline: none;
}
.sf-btn--secondary::before {
background: -webkit-gradient(linear, left top, right top, from(red), color-stop(50%, red), to(#ff7000));
background: linear-gradient(90deg, red, red 50%, #ff7000);
content: "";
position: absolute;
z-index: -2;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 4px;
}
.sf-btn--secondary::after {
content: "";
position: absolute;
background-color: #fff;
border-radius: 4px;
z-index: -1;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
}
.sf-btn--secondary:hover {
color: #262a33;
}
.sf-btn--secondary:hover::before {
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
}
.sf-btn--secondary:focus {
color: #262a33;
}
.sf-btn--secondary:focus::before {
z-index: -2;
-webkit-box-shadow: 0 0 6px 2px #ff7000;
box-shadow: 0 0 6px 2px #ff7000;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.sf-btn--secondary:active {
z-index: inherit;
background: linear-gradient(34deg, #eb2506, #eb2506 37%, #ef6f08);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.sf-btn--secondary:active::after {
z-index: -2;
}
.sf-btn--secondary:active::before {
-webkit-box-shadow: none;
box-shadow: none;
}
.sf-btn--lg {
padding: 8px 64px;
font-size: 16px;
line-height: 48px;
font-weight: 700;
}
.sf-btn--full-width {
width: 100%;
margin-right: -4px!important;
}
.sf-btn--full-width::after {
transform: translateX(4px);
}
.wrapper--red {
background-color: red;
z-index: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-of-wrapper">
<div class="wrapper">
<button class="sf-btn sf-btn--lg sf-btn--secondary">Hello</button>
</div>
</div>
I don't know but for some reasons, transition doesn't seem to be working. I am testing this Google Chrome.
[data-title] {
position: relative;
margin: 100px;
}
[data-title]:hover:before {
transform: translate(-50%, 0);
width: 18px;
height: 6px;
left: 50%;
margin-top: 0px;
top: 100%;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0.25s;
transition: all 0.25s;
content: '';
position: absolute;
z-index: 10;
box-sizing: border-box;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #00204e;
}
[data-title]:hover:after {
transform: translate(-50%, 0);
left: calc(50%);
margin-top: 10px;
top: 100%;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0.25s;
transition: all 0.25s;
font-weight: normal;
text-shadow: none;
background: #00204e;
border-radius: 4px;
color: #fff;
content: attr(data-title);
padding: 10px;
position: absolute;
white-space: normal;
width: max-content;
font-size: 12px;
font-family: 'Helvetica Neue';
line-height: normal;
max-width: 150px;
text-align: left;
height: auto;
display: inline-block;
}
<span class="dijitButtonContents" id="saveButton" data-title="Save as draft"><span id="saveButton_label">Save</span></span>
Can anyone help where I am going wrong or am I missing something?
I have even tried to make transition timing to +1 seconds but still it doesn't reflects the same.
You have not set anything for the original state so the transition doesn't know what to go from. If you are only wanting to transition the item's appearance - eg fade in or out, then you need to do something like transition the opacity:
[data-title] {
position: relative;
margin: 100px;
}
[data-title]:before {
width: 18px;
height: 6px;
left: 50%;
margin-top: 0px;
top: 100%;
opacity: 1;
content: '';
position: absolute;
z-index: 10;
box-sizing: border-box;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #00204e;
transform: translate(-50%, 0);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
[data-title]:after {
transform: translate(-50%, 0);
left: calc(50%);
margin-top: 10px;
top: 100%;
opacity: 1;
font-weight: normal;
text-shadow: none;
background: #00204e;
border-radius: 4px;
color: #fff;
content: attr(data-title);
padding: 10px;
position: absolute;
white-space: normal;
width: max-content;
font-size: 12px;
font-family: 'Helvetica Neue';
line-height: normal;
max-width: 150px;
text-align: left;
height: auto;
display: inline-block;
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
[data-title]:hover:before,
[data-title]:hover:after {
opacity: 1;
pointer-events: auto;
}
<span class="dijitButtonContents" id="saveButton" data-title="Save as draft"><span id="saveButton_label">Save</span></span>
If you want something to transition from one state to another, you have to define both states. This means having a base-style and a :hover-style.
For example:
.test {
width: 100px;
height: 50px;
background: red;
transition: all 2s;
}
.test:hover {
height: 100px;
}
<div class="test">test</div>
This works, because there is an initial state for the height attribute. This however:
.test {
width: 100px;
background: red;
transition: all 2s;
}
.test:hover {
height: 300px;
}
<div class="test">test</div>
This will not work, because the browser doesn't have a specified height as an initial state.
I have a DIV with an "arrow" at the bottom, not unlike a speech bubble from a comic book, which appears on the hover state:
The arrow is created with the :after and :before pseudo elements.
I have a transition for the hover for the border color and the box shadow.
My problem is that the "arrow" just "appears". No fade like the other items, but I can't figure out how to target the "arrow". "All" does not look right either.
Ideally, I'd love to have a delay on the arrow and a simple fade or wipe.
Here's the CSS:
.item-selector-button {
position: relative;
text-align: center;
cursor: pointer;
border: 1px solid #cecece;
padding: 15px;
border-radius: 0;
color: #000;
width: 160px;
height: 120px;
transition: all ease-in-out 0.1s, box-shadow ease-in-out 0.1s;
}
.item-selector-button .title {
color: #3e53a4;
font-size: 12px;
margin: 0;
padding-top: -3px;
font-family: "PrecisionSans_W_Md", "Helvetica Neue", Arial, sans-serif;
}
.item-selector-button .divider {
height: 1px;
width: 20px;
background-color: #cecece;
margin: 4px auto 10px;
}
.item-selector-button .image {
background: #fff url("../images/box.png") center center no-repeat;
width: 64px;
height: 57px;
margin: 4px auto;
}
.item-selector-button:hover, .item-selector-button.hover {
padding: 14px;
}
.item-selector-button:hover:after, .item-selector-button.hover:after {
content: "";
position: absolute;
bottom: -12px;
left: 68px;
border-width: 12px 12px 0;
border-style: solid;
border-color: #fff transparent;
transition-delay: 0.3s;
}
.item-selector-button:hover:before, .item-selector-button.hover:before {
content: "";
position: absolute;
bottom: -15px;
left: 65px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #3e53a4 transparent;
transition-delay: 0.3s;
}
.item-selector-button:active, .item-selector-button.active {
border-width: 2px;
border-color: #3e53a4;
background-color: #3e53a4;
}
.item-selector-button:active:before, .item-selector-button.active:before {
content: "";
position: absolute;
bottom: -15px;
left: 65px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #3e53a4 transparent;
transition-delay: 0.3s;
}
.item-selector-button:active .title, .item-selector-button.active .title {
color: #fff;
}
.item-selector-button:active .divider, .item-selector-button.active .divider {
background-color: #fff;
}
.item-selector-button:active .image, .item-selector-button.active .image {
background-color: #3e53a4;
}
.item-selector-button:active:hover, .item-selector-button.active:hover {
padding: 15px;
box-shadow: none;
}
.item-selector-button:active:hover:after, .item-selector-button.active:hover:after {
content: "";
position: absolute;
bottom: -12px;
left: 68px;
border-width: 12px 12px 0;
border-style: solid;
border-color: #3e53a4 transparent;
transition-delay: 0.3s;
}
.item-selector-button.disabled {
pointer-events: none;
cursor: not-allowed;
}
.item-selector-button.disabled .title {
color: #c3c3c3;
}
.item-selector-button.disabled .image {
background-image: url("../images/box-disabled.png");
}
.item-selector-button.disabled:hover {
padding: 15px;
border: 1px solid #cecece;
box-shadow: none;
}
You only have pseudoelements on the hovered element, so there is nothing to transition from/to. You need to add the pseudo elements on the non-hover state element.
Example transitioning visibility:
.item-selector-button:before {
.arrow-inside(...);
transition:all 5s ease;
transition-delay: 0.3s;
visibility:hidden;
}
.item-selector-button:after {
.arrow-outside(...);
transition:all 5s ease;
transition-delay: 0.3s;
visibility:hidden;
}
.item-selector-button:hover:before {
visibility:visible;
}
.item-selector-button:hover:after {
visibility:visible;
}