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.
Related
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;
}
The above is an image of a project I'm working on. This is how far I got:
Creating the box was fairly simple; however, now I have NO IDEA how to create this cut corner on the bottom left. I've tried a bunch of things already and most things work if the background isn't transparent but a block of color. Since the background needs to be this image, I can't make the cut corner work without having one side show a certain color. This is my code:
<div class="profile">
// HTML content
</div>
<style>
profile {
border: 2px solid #fff;
color: #fff;
height: 100%;
padding: 10px;
width: 250px;
</style>
I've tried multiple things already, such as this here (not the exact code I used, but I followed this example):
.cut {
border: none;
position: relative;
}
.cut:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
border-bottom: 20px solid lightgrey;
border-left: 20px solid #e67e22;
width: 0;
}
This creates a cut corner, but with a block of a solid color and I need the image to be shown, not the color.
Does anyone have a clue how to do this? Suggestions are much appreciated. Thanks!
You may use before/after element to make the bottom part like this :
.profile {
position:relative;
display:inline-block;
margin:50px;
border:1px solid #000;
border-bottom:none;
width:100px;
height:200px;
background:#ccc;
}
.profile:after {
content:" ";
position:absolute;
border:1px solid #000;
height:20px;
width:80px;
bottom:-20px;
right:-1px;
border-top:0;
border-left:0;
background:#ccc;
}
.profile:before {
content:" ";
position:absolute;
border-bottom:1px solid #000;
height:29px;
width:29px;
transform:rotate(45deg);
bottom:-15px;
left:6px;
background:#ccc;
}
<div class="profile"></div>
the bottom is split into tow part : a rectangle with only two border + a square with one border rotated with 45°
Hope it helps
NB : Becarefull when changing the dimensions
.profile {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 20px;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.profile h2 {
margin: 0 0 10px;
}
.profile p {
font-size: 14px;
}
.profile .bottom {
position: absolute;
bottom: -30px;
right: -2px;
width: 180px;
height: 30px;
border-bottom: 2px solid #000;
box-sizing: border-box;
border-right: 2px solid #000;
}
.profile .bottom::before {
content: '';
position: absolute;
left: -10px;
bottom: -4px;
width: 2px;
height: 35px;
background-color: #000;
transform: rotate(-35deg);
}
<div class="profile">
<h2>Name</h2>
<p>Description</p>
<div class="bottom"></div>
</div>
I think you're trying to cut the corner of an image instead of div, so you can do something like this:
body {
background: url('https://www.lunapic.com/editor/premade/o-paint-bucket.gif');
}
.container {
display: inline-block;
width: 200px;
height: 300px;
overflow: hidden;
}
.container .image_container {
width: 320px;
height: 550px;
overflow: hidden;
display: block;
position: relative;
transform: rotate(45deg);
margin-left: calc(260px - 360px);
margin-top: -40px;
}
.container .image_container .image {
transform: rotate(-45deg);
margin-top: 10px;
margin-left: -10px;
}
<div class="container">
<div class="image_container">
<div class="image">
<img src="https://www.w3schools.com/css/img_fjords.jpg" />
</div>
</div>
</div>
I have this code:
How can I make it have that arrow thing at the top:
like this:
so it can look like a popup?
Here is the styling for it:
.div-cancel{
background-color: #FAFAFA;
width:200px;
display:none;
height:85px;
font-size:15px;
padding-top:18px;
padding-left:10px;
padding-right:10px
}
<div class="div-cancel" id="cancel101" >
<span><span style="background-color: #FAAB20;"><i class="fa fa-exclamation" style="width:25px;color:white"></i></span>
Please type in 'CANCEL' to cancel subscription. </span>
</div>
Here is the demo.
The Css solution is:
.div-cancel {
background-color: #1E2021;
width:200px;
display:block;
height:85px;
font-size:15px;
padding-top:18px;
padding-left:10px;
padding-right:10px;
position: relative;
color: #ababab;
}
.div-cancel:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #1E2021;
left: 10px;
top: -12px;
}
You can use this CSS with the unchanged HTML shown in the question.
If you want a border around your arrow, using transform on the ::before pseudo element and some positioning, can get the affect that you want without any added markup. Just make sure div-cancel has it's position set to relative.
.div-cancel {
position: relative;
margin-top: 20px;
background-color: #FAFAFA;
width: 200px;
height: 85px;
font-size: 15px;
padding-top: 18px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid grey;
}
.div-cancel::before {
position: absolute;
top: -4px;
left: 5px;
width: 5px;
height: 5px;
border: 1px solid grey;
border-bottom: 0;
border-right: 0;
background: #fff;
transform: rotate(45deg);
content: '';
}
<div class="div-cancel" id="cancel101">
<span>
<span style="background-color: #FAAB20;">
<i class="fa fa-exclamation" style="width:25px;color:white"></i>
</span> Please type in 'CANCEL' to cancel subscription.
</span>
</div>
What I'm trying to do is to create a triangle on the bottom border of a block with CSS, and write some text in there like it's shown in this figure :
What I did so far, is :
Create the block element, with its its orange big bottom border.
Create the triangle using CSS.
All I need now is a way to place that triangle exactly in the middle of that exact place. I tried several ways to do that, but without any result.
Here's my code :
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
.content_block.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 25px;
border-color: transparent transparent transparent #FE992C;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="text">Je déménage</div>
</div>
You can notice that there's an HTML class called triangle that I don't show. I don't know how to show it exactly in that position.
EDIT :
I'm using the exact selector ( .content_block ) for showing other blocks; Like this block for instance :
So, a solution with after pseudo element will affect this block too. This is why I really need to avoid pseudo elements..
Edit
If you can't use a pseudo element for the triangle, you will need to add an element. You can add it as a child of the .content_block element. This uses the same approach described in the original answer :
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.triangle {
position: absolute;
bottom: 0;
left: 50%;
border-right: 20px solid transparent;
border-bottom: 12px solid #F59A3C;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="triangle"></div>
<div class="text">Je déménage</div>
</div>
Original answer:
You can make the triangle with the border technique and a pseudo element.
In the following example, I used the .content_block:after pseudo element with absolute positioning:
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.content_block:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
border-right: 20px solid transparent;
border-bottom: 12px solid #F59A3C;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="text">Je déménage</div>
</div>
User :after selector and position that absolutely
Here is updated fiddle:
https://jsfiddle.net/yod8Lvjt/1/
I'm looking for a way to implement a bracket style border around my <h2> headings; I've attached an image showing exactly what I'm trying to accomplish.
The only way I can think of to achieve this effect is by using images, but I'm unsure of exactly how to do so(all of my <h2>s are of varying length/height, or if maybe there is a better way.
Any tips & insight are greatly appreciated.
**I hate to resurrect this, but what can I look towards as being the solution to the problem shown int he updated image? The right line is too far right, as well as some opacity issues above and below the text..
UPDATE:
Working jsFiddle example.
Use the following. You just need to change the font of the text or replace it for an image, and maybe change the color of the borders to match yours.
For the HTML:
<div id="h2pre"></div>
<h2>
<div id="h2inpre"></div>
<div id="h2cont">Ready for the event of a lifetime?<br/>
We'd love to hear from you.
</div>
<div id="h2inpos"></div>
</h2>
For the CSS:
h2{
text-align:center;
position:relative;
margin-left:50%;
left:-150px
}
div{ float:left; }
#h2inpre, #h2inpos{
background-color:#fff;
height:50px;
width:20px;
border-bottom:1px solid #FFA500;
border-top:1px solid #FFA500;
}
#h2inpre{
border-left:1px solid #FFA500;
}
#h2inpos{
border-right:1px solid #FFA500;
clear:right;
}
#h2cont{
font-family:"Arial",sans-serif;
padding:5px;
background-color:#fff;
}
#h2pre{
height:1px;
width:100%;
background-color:#FFA500;
margin-top:25px;
position:absolute;
float:none;
}
html:
<h2 class="bracket"><span class="text">Ready for the event of a lifetime?<br>We'd love to hear from you.</span></h2>
css:
.bracket {
position: relative;
text-align: center;
color: #999;
font-size: 1.2em;
}
.bracket:before {/* vertical stripe */
content: " ";
border-top: solid 1px orange;
position: absolute;
bottom: 50%;
left: 0;
right: 0;
}
.bracket .text {
position: relative;
display: inline-block;
background: #fff;
padding: .2em 1em;
max-width: 80%;/* force that at least some of vertical stripe is still shown */
}
.bracket .text:before {/*left bracket*/
content: " ";
border: solid 1px orange;
border-right: 0px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: .4em;
right: 0;
}
.bracket .text:after {/*right bracket*/
content: " ";
border: solid 1px orange;
border-left: 0px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: .4em;
right: 0;
}
demo: http://jsbin.com/ibiyal/2
You'll probably have to tinker with the padding of the text block, and the width of the left and right bracket.
Only downside is that it only works on a solid background.
It is perfectly possible. Take a look: http://tinkerbin.com/zQ1VWLLi
The HTML...
<h2 class="box">
<span>Ready for the event of a lifetime? <br/> We'd love to hear from you.</span>
</h2>
The CSS...
h2:before,
h2 span:before,
h2 span:after {
content: "";
position: absolute;
}
h2 {
position: relative;
font: 16px/1.2em cambria;
text-align: center;
}
h2:before {
top: 50%;
height: 1px; width: 100%;
background-color: orange;
}
h2 span {
display: block;
width: 50%;
padding: 7px;
margin: 0 auto;
position: relative;
background: /*same as background where it sits*/;
border: 1px solid orange;
}
h2 span:before,
h2 span:after {
left: 7%; right: 7%;
height: 1px;
background: /*same as background where it sits*/;
}
h2 span:before {
top: -1px;
}
h2 span:after {
bottom: -1px
}
You could do this with HTML and CSS.
CSS
#container {
position: relative;
height: 43px;
}
#bracks {
background-color: #fff;
margin:0 auto;
border: 1px solid black;
width: 200px;
height: 40px;
position: relative;
}
#text {
background-color: #fff;
position: absolute;
width: 150;
left: 15;
height: 22px;
top: -1;
padding: 10px;
text-align: center;
}
#strike {
position: absolute;
top: 21;
width: 100%;
border-top: 1px solid black;
}
HTML
<div id="container">
<div id="strike"> </div>
<div id="bracks">
<div id="text">Some text here.</div>
</div>
</div>