When I hover over the first Div, the tooltip is shown further away than if I hover over the following two divs. Obviously it is because the text inside the div is larger/longer. But I don't want to show the tooltip span not depending on the hover text, but relating to the containing div of the text, so it is shown always at the same position.
jQuery is not an option for anything though but I kind of think, that it's a CSS problem anyway.
.subPhaseContainer {
float: left;
margin: 0 auto;
}
.projectItem {
margin: 4px;
border: 2px solid black;
cursor: pointer;
height: 17px;
}
.projectItem.green {
background-color: green;
color: white;
}
.projectNumber {
position: relative;
display: inline-block;
width: 80px;
}
.projectNumber .tooltiptext {
visibility: hidden;
width: fit-content;
text-align: left;
padding: 5px;
top: -1px;
position: absolute;
z-index: 1;
margin-left: 34px;
transition: opacity 0.3s;
border: 1px solid black;
}
.projectNumber .tooltiptext::after {
content: "";
position: absolute;
top: 20%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.projectNumber:hover .tooltiptext.green {
background-color: green;
color: white;
visibility: visible;
opacity: 1;
}
.projectNumber:hover .tooltiptext.yellow {
background-color: yellow;
visibility: visible;
opacity: 1;
}
.projectNumber:hover .tooltiptext.red {
background-color: red;
color: white;
visibility: visible;
opacity: 1;
}
<div class="subPhaseContainer">
<div class="projectItem green">
<div class="projectNumber"><span>AAAA-00</span>
<span class="tooltiptext green">Tooltip Sample</span>
</div>
</div>
<div class="projectItem green">
<div class="projectNumber">
<span>BBB-11</span>
<span class="tooltiptext green">Tooltip Sample</span>
</div>
</div>
<div class="projectItem green">
<div class="projectNumber">
<span>CCC-22</span>
<span class="tooltiptext green">Tooltip Sample</span>
</div>
</div>
</div>
You need to specify either a 'left' or 'right' position for your tooltiptext span, otherwise its left/right position will be the same as it would have been had you kept the tooltiptext span positioned relative.
So just update your CSS for the tooltiptext to this:
.projectNumber .tooltiptext {
visibility: hidden;
width: fit-content;
text-align: left;
padding: 5px;
top: -1px;
right: -100%;
position: absolute;
z-index: 1;
margin-left: 34px;
transition: opacity 0.3s;
border: 1px solid black;
}
Related
I am trying to create an effect when div class="container" is being hovered, a smooth upper transition occurs of another div from bottom. Only during hover, this should happen cause I want that .bottom div to be hidden. When that div is not hidden, I can see the effect as I want. But as I hide the bottom div, that hovering effect smooth transition effect cannot be seen. Check this code once.
HTML CODE
<div class="box">
Hello
<div class="bottom">
Everyone
</div>
</div>
CSS code
.box{
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top:80px;
left:0;
/* display: none; */
}
.box:hover .bottom {
display: block;
transition: linear 0.2s;
top:55px;
}
Here is the codepen link
https://codepen.io/Biebk/pen/MWpREqb
First off, rather than display: none to hide the incoming element altogether, you can set its opacity to 0, and then when the parent is hovered, set it to 1, like so:
.bottom {
opacity: 0;
}
.box:hover .bottom {
opacity: 1;
}
I suppose that given you want an incoming "pull-up" effect on hover, you want to that element to also "pull-down" when the hover ends. You can reverse the same effect by using a :not(:hover) on the parent element:
.box:not(:hover) .bottom {
opacity: 0;
}
Also, be sure to set the transition on the non-hovered state. The following example provides the smooth transition you're looking for:
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
left: 0;
transition: all .25s ease;
}
.box:not(:hover) .bottom {
top: 80px;
opacity: 0;
}
.box:hover .bottom {
top: 55px;
opacity: 1;
}
<div class="box">
Hello
<div class="bottom">
Everyone
</div>
</div>
A secondary approach would be to place the bottom div as a sibling to the box, and use the adjacent sibling combinator to apply the hover effects:
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
font-size: 20px;
background: pink;
width: 80px;
text-align: center;
position: absolute;
left: 0;
top: 80px;
opacity: 0;
cursor: default;
transition: all .25s ease;
}
.box:hover + .bottom {
top: 55px;
opacity: 1;
}
<div class="box">
Hello
</div>
<div class="bottom">
Everyone
</div>
Use opacity property rather than display to achieve the desired effect, then
use the following code
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top: 80px;
left: 0;
opacity: 0;
}
.box:hover .bottom{
opacity: 1;
transition: opacity 0.2s , top 1s;
top: 55px;
}
Use the following code.
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.hovered{
transition: all .2s;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top: 80px;
left: 0;
visibility: hidden;
}
.hovered:hover+.bottom {
transition: all .2s;
top: 55px;
visibility: visible;
}
<div class="box">
<div class="hovered">Hello</div>
<div class="bottom">
Everyone
</div>
</div>
Basically, I want to add the purple border for the selected item. I think the ::before pseudo element is the best option here?
I've tried this, but it's not very good at all and it sits right next to the text rather than on the edge of the screen:
#serverList {
li::before {
content: 'a';
height: 5em;
width: 1em;
color: blue;
background-color: blue;
}
}
Thank you!
First, you have to add position relative to father element:
#serverList li{
position: relative;
}
Then, let's work in children element(::before)
#serverList li::before{
content: ''; /* is not necesary any info here */
height: 5em;
width: 1em;
color: blue;
background-color: blue;
position: absolute; /* this is absolute to the father element*/
left: 0; /* we want this in the point 0 of our father element*/
}
You can play with properties top, left, right, bottom and the position absolute.
What about the following? You can use a wrapper and add your content inside of a span which is centered.
.wrapper {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
padding: 12px 12px 12px 40px;
}
.wrapper::before {
content: '';
left: 0;
width: 10px;
height: 100%;
opacity: 0;
background: lightblue;
position: absolute;
transition: 0.5s all ease;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
.wrapper:hover::before {
opacity: 1;
}
<div class="wrapper">
<span>This is a text</span>
</div>
<div class="wrapper">
<span>This is a second text</span>
</div>
<div class="wrapper">
<span>This is another</span>
</div>
EDIT #1
If you want to retain the state:
$( ".wrapper" ).each(function(index) {
$(this).on("click", function(){
$(this).toggleClass("active");
});
})
.wrapper {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
padding: 12px 12px 12px 40px;
box-shadow: 0px 0px 1px grey;
margin-bottom: 6px;
max-width: 200px;
}
.wrapper::before {
content: '';
left: 0;
width: 10px;
height: 100%;
opacity: 0;
background: lightblue;
position: absolute;
transition: 0.5s all ease;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
.wrapper.active::before {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<span>Click here</span>
</div>
<div class="wrapper">
<span>Click here 2</span>
</div>
<div class="wrapper">
<span>Click here 3</span>
</div>
I want my priority-menu (the one with 2 dots) to have the 3 dots displayed horizontally. Since each individual dot is inline-block I don't understand why they are stacked on top of one another. The menu is rendered by clicking on the blue circle on the right of the "save task" button, which changes its display to inline instead of none. I tried changing that to inline-block and nothing seems to have changed.
/* The popup menu - hidden by default */
#priority-menu {
display: none;
position: absolute;
top: 150%;
border: 3px solid #f1f1f1;
z-index: 9;
max-width: 300px;
padding: 10px;
background-color: white;
}
#priority-dot-open-menu {
position: relative;
height: 25px;
width: 25px;
background-color: blue;
border-radius: 50%;
display: inline-block;
opacity: 0.8;
cursor: pointer;
}
#priority-dot-open-menu:hover {
opacity: 1;
}
#priority-dot-blue {
height: 25px;
width: 25px;
background-color: blue;
border-radius: 50%;
display: inline-block;
opacity: 0.8;
}
#priority-dot-yellow {
height: 25px;
width: 25px;
background-color: yellow;
border-radius: 50%;
display: inline-block;
opacity: 0.8;
}
#priority-dot-red {
height: 25px;
width: 25px;
background-color: red;
border-radius: 50%;
display: inline-block;
opacity: 0.8;
}
.modal-footer {
padding: 0;
}
#priority-menu::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
<div class="modal-footer d-flex flex-row justify-content-start pl-0 mt-4 border-0">
<button type="button" class="btn btn-primary btn-sm" id="add-task-modal-save">Save task</button>
<span id="priority-dot-open-menu">
<span id="priority-menu">
<span class="tooltip-top"></span>
<span id="priority-dot-blue"></span>
<span id="priority-dot-yellow"></span>
<span id="priority-dot-red"></span>
</span>
</span>
</div>
Your priority-menu is contained within an element which you’ve set to 25px width. Try removing this and changing to 300px, like your priority-menu.
#priority-dot-open-menu {
position: relative;
height: 25px
width: 300px;
background-color: blue;
border-radius: 50%;
display: inline-block;
opacity: 0.8;
cursor: pointer;
}
You can also try adding a declared width to your menu instead of just a max-width.
#priority-menu {
width:300px;
}
I am trying to code an input box like in the image below.
However, I only end up with part of the lines with the current code.
When it's a button rather than an edit, everything in fine.
.sidebar-search input {
display: inline-block;
border-color: #ffd717 -moz-use-text-color #ffd717 #ffd717;
border-style: solid none solid solid;
border-width: 2px 0 2px 0px;
color: #ffd717;
padding: 15px 25px;
position: relative;
overflow: hidden;
}
.sidebar-search input::before,
.sidebar-search input::after {
content: '';
width: 2px;
height: 160%;
position: absolute;
top: -30%;
background-color: #FFD717;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index: 9999;
}
.sidebar-search input::before {
left: 10%;
}
.sidebar-search input::after {
right: 10%;
}
<div class="right-sidebar-area">
<div class="single-right-sidebar">
<div class="sidebar-search">
<input type="text" name="Search">
</div>
</div>
</div>
You are very close. It looks like ::before and ::after pseudo-selectors don't work for input elements, so apply it directly to sidebar-search and add more styles to that div
.sidebar-search {
/*specify positioning, height and width */
position: relative;
height: 50px;
width: 175px;
}
.sidebar-search input {
display: inline-block;
border-color: #ffd717 -moz-use-text-color #ffd717 #ffd717;
border-style: solid none solid solid;
border-width: 2px 0 2px 0px;
color: #ffd717;
padding: 15px 25px;
position: relative;
top: 5px;
overflow: hidden;
}
.sidebar-search::before,
.sidebar-search::after {
content: '';
width: 2px;
height: 160%;
position: absolute;
top: -30%;
background-color: #FFD717;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index: 9999;
}
.sidebar-search::before {
left: 10px; /*these values are more accurate according to the picture */
}
.sidebar-search::after {
right: 10px; /*these values are more accurate according to the picture */
}
<div class="right-sidebar-area">
<div class="single-right-sidebar">
<div class="sidebar-search">
<input type="text" name="Search">
</div>
</div>
</div>
I have a custom CSS Tooltip that when it appears, it pushes the other content down. I know that I need to add position: absolute to get it working right, but I can't seem to figure out where...
HTML:
<p>Fluff</p>
<p>Fluff</p>
<p>Fluff</p>
<p>Fluff</p>
<p>Fluff</p>
<div class="outer">
<a class="tippy" href="">
ICON<img src="" class="icon"/>
</a>
<div class="tooltip">
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
</div>
</div><!-- Container -->
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
CSS:
.outer {
width: 350px;
}
.tippy {
text-decoration: none;
}
a.tippy:hover + div {
display:block;
float: right;
}
.tooltip {
margin-left: 5px;
margin-top: -15px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
display: none;
}
.tooltip:after, .tooltip:before {
border: solid transparent;
content:' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.tooltip:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.tooltip:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
Fiddle:
You need to change position:relative to position:absolute in the .tooltip CSS block.
You will also need to modify the CSS for positioning the tooltip due to this change.
If you modify .outer to have position:relative this is as simple as setting .tooltip as
left:55px;
top:-15px;
The resulting CSS (showing only the blocks that have changed):
.outer {
width: 350px;
position:relative;
}
.tooltip {
left: 55px;
top: -15px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: absolute;
border: 2px solid #333;
display: none;
}
And finally a jsFiddle showing it in action.