I have a close button symbol which shows a top tooltip on hover pointing downwards. I have taken this example from https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom
<div id="middle">
<div class="posts">
<i class="fas fa-times fa-lg"><span class="tooltiptext">Exit</span></i>
</div>
</div>
CSS
.posts {
background:white;
border:1px solid #c0c0c0;
border-radius:4px;
padding:20px;
position:relative;
}
.posts a i.tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.posts a i.tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.posts a:hover i.tooltiptext {
visibility: visible;
}
Tooltip is not showing.
Please add style to posts class
.posts{
position:relative;
margin:60px;
text-align:center;
}
.posts{
position:relative;
margin:60px;
text-align:center;
}
.posts a .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.posts a .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.posts a:hover .tooltiptext {
visibility: visible;
}
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<div id="middle">
<div class="posts">
<i class="fas fa-times fa-lg"><span class="tooltiptext">Exit</span></i>
</div>
</div>
Related
I'm trying to make some arrows like the following
arrows
I am using Sass and Bootstrap4 and I want to make them by drawing them with css3
I've tried this, but I don't know how to achieve it:
.line1 p{
background-color: red;
width: 80px;
height: 80px;
text-align: center;
align-items: center;
border-radius: 50%;
color: #fff;
font-size: 2rem;
}
.line1 p::before{
content:'';
display: block;
color: blue;
width: 300px;
height: 10px;
position: absolute;
border: 5px solid red;
margin: 30px 10px 0;
z-index: -1;
border-radius: 0 50px 50px 0;
background-color: red;
}
.line1 p::after{
content:'';
display: block;
color: blue;
width: 10px;
height: 200px;
position: absolute;
border: 5px solid red;
margin-left: 20px;
z-index: -1;
background-color: red;
}
<div class="col-md-3 align-items-center mr-0">
<div class="line1 my-auto">
<p class="d-block my-auto">1</p>
</div>
</div>
I come from the future and you managed to do it like this:
.line-container{
border-bottom: 5px solid red;
border-right: 5px dashed red;
}
.line-container::before{
content:"";
// display:block;
position: absolute;
height: 20px;
width:20px;
border-radius:50%;
background: red;
bottom:-7px;
left:0;
}
.line-container::after{
content:"2";
position:absolute;
width:55px;
height:55px;
border-radius:50%;
background: red;
bottom:-25px;
right:-7px;
font-size:2rem;
font-weight:700;
color:#fff;
text-align:center;
}
.line-container p::before{
content:"➤";
position:absolute;
font-size:32px;
color:red;
right:2.6px;
top:-30px;
transform: rotate(270deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-8 mt-5">
<div class="line-container px-md-5 pt-5">
<p class="mt-5" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta minus </p>
</div>
</div>
You only need to use the 'lines' of the rectangles of the containers, they already exist so you only need to put color
I was able to find the initial css for a triangle here. Basically you want to make two borders of a div transparent and give them a certain width so it appears to pinch the div into a triangle. I also added the ball which was pretty straightforward aside from positioning.
You may want to make further adjustments to fit your needs but this should get you started :)
.line1 p{
background-color: red;
width: 80px;
height: 80px;
text-align: center;
align-items: center;
border-radius: 50%;
color: #fff;
font-size: 2rem;
}
.line1 p::before{
content:'';
display: block;
color: blue;
width: 300px;
height: 10px;
position: absolute;
border: 5px solid red;
margin: 30px 10px 0;
z-index: -1;
border-radius: 0 50px 50px 0;
background-color: red;
}
.line1 p::after{
content:'';
display: block;
color: blue;
width: 10px;
height: 200px;
position: absolute;
border: 5px solid red;
margin-left: 20px;
z-index: -1;
background-color: red;
}
.arrow1{
position: absolute;
transform: rotate(180deg);
left: 3px;
top: 225px;
width: 0;
height: 0;
border-right: 28px solid transparent;
border-bottom: 60px solid red;
border-left: 28px solid transparent;
}
.ball1{
position: absolute;
left: 300px;
top: 15px;
background-color: red;
border-radius: 50%;
height: 50px;
width: 50px;
}
<div class="col-md-3 align-items-center mr-0" style="position: relative;">
<div class="line1 my-auto">
<p class="d-block my-auto">1</p>
<div class='arrow1'></div>
<div class='ball1'></div>
</div>
</div>
Well, I'll give you a quick PoC you could easily expand on so its use could be defined for the instance with pre-made templates but if you want all other directions and stuff you'll have to do the extra creative work and fill in the blanks on your own but this might help get you started. Cheers!
.magic-arrows {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: var(--arrow-circle-height);
width: var(--arrow-circle-width);
background-color: var(--arrow-color);
border-radius: 50%;
overflow: visible;
}
.magic-arrows:before, .magic-arrows:after {
content: '';
display: block;
position: absolute;
color: var(--arrow-color);
border: var(--arrow-color) var(--arrow-dash-size) dashed;
overflow: visible;
z-index: -1;
}
.magic-arrows:before {
height: 0;
width: calc( var(--arrow-circle-width) + var(--arrow-width) );
left: var(--arrow-circle-width);
top: 50%;
transform: translateY(-50%);
}
.magic-arrows:after {
width: 0;
height: calc( var(--arrow-circle-width) + var(--arrow-width) );
top: var(--arrow-circle-width);
left: 50%;
transform: translateX(-50%);
}
.magic-arrows .arrow-right, .magic-arrows .dot-down {
position: absolute;
font-size: var(--arrow-size);
color: var(--arrow-color);
}
.magic-arrows .arrow-right {
top: 50%;
left: calc(var(--arrow-circle-width) + var(--arrow-width) + var(--arrow-size) + 1rem);
transform: translateY(-55%);
}
.magic-arrows .dot-down {
position: absolute;
left: 50%;
top: calc(var(--arrow-circle-width) + var(--arrow-width) + var(--arrow-size) + 1rem);
transform: translateX(-55%) rotate(90deg);
}
<div class="magic-arrows"
style="--arrow-color: red;
--arrow-circle-height: 3rem;
--arrow-circle-width: 3rem;
--arrow-width: 10rem;
--arrow-dash-size: 5px;
--arrow-size: 2rem;">
<span>3</span>
<div class="arrow-right">➤</div>
<div class="dot-down">◉</div>
</div>
i am trying to implement a tooltip like div using css.
i am refering
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip
above example shows a top tool tip.
can any one help me change this to bottom tool tip. I am very weak in CSS and design.
Here you go this could help you.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: -40px;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 0px 10px 10px 10px;
border-style: solid;
border-color: #555 transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Here it is...
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Here is how you can do it with some changes in CSS.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: -215%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #555;
border-width: 6px;
margin-left: -6px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<div style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</div>
Try this...!!!
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px solid black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<div class="tooltip">Hover Me
<span class="tooltiptext">bottom tooltip</span>
</div>
</body>
</html>
i have this css tootlip code:
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
I want it to auto resize based on the text lenght. (long or short)..how i can do it? Thank you.
Get rid of; width:140px; from the class a.tooltips span
I have two divs that wrap both an input box and an icon that displays Tooltip text when hovered over. Due to me needing to have the divs stack on each other, they have 'position: relative;'. When I hover over the first Tooltip icon, the Tooltip text is too large to be contained within its wrapper div. However, instead of the text being completely visible, it gets buried under the second wrapper div.
I want my visual design to be exactly the same as it is, the only difference being that the Tooltip rises on top of the div that is currently burying it. Is there any way to go about this without doing an overhaul of my code?
https://jsfiddle.net/jlcollier/nw45knLy/1/
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="inputblock">
<input class="inputseperate" type="text" name="a"><br>
<div class="help-tip">
<p>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa</p>
</div>
</div>
<div class="inputblock">
<input class="inputseperate" type="text" name="b"<br>
<div class="help-tip">
<p>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb</p>
</div>
</div>
</body>
</html>
CSS:
.inputseperate {
width:70%;
}
.inputblock {
margin-bottom:30px;
width:100%;
background-color: #ccc;
border-radius: 5px 5px 5px 5px;
position: relative;
}
.help-tip{
position: absolute;
top: 0px;
right: 5px;
text-align: center;
background-color: #333;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display:block;
transform-origin: 100% 0%;
}
.help-tip p{
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
overflow: visible;
font-size: 13px;
line-height: 1.4;
}
.help-tip p:before{
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#1E2021;
overflow: visible;
right:10px;
top:-12px;
}
.help-tip p:after{
width:100%;
height:40px;
content:'';
position: absolute;
overflow: visible;
top:-40px;
left:0;
}
Add the z-index property to .help-tip
fiddle
.inputseperate {
width: 70%;
}
.inputblock {
margin-bottom: 30px;
width: 100%;
background-color: #ccc;
border-radius: 5px 5px 5px 5px;
position: relative;
}
.help-tip {
position: absolute;
top: 0px;
right: 5px;
text-align: center;
background-color: #333;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
z-index: 1;
}
.help-tip:before {
content: '?';
font-weight: bold;
color: #fff;
}
.help-tip:hover p {
display: block;
transform-origin: 100% 0%;
}
.help-tip p {
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
overflow: visible;
font-size: 13px;
line-height: 1.4;
}
.help-tip p:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #1E2021;
overflow: visible;
right: 10px;
top: -12px;
}
.help-tip p:after {
width: 100%;
height: 40px;
content: '';
position: absolute;
overflow: visible;
top: -40px;
left: 0;
}
<div class="inputblock">
<input class="inputseperate" type="text" name="a"><br>
<div class="help-tip">
<p>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa</p>
</div>
</div>
<div class="inputblock">
<input class="inputseperate" type="text" name="b" <br>
<div class="help-tip">
<p>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb</p>
</div>
</div>
I tried to add an arrow shape to a div. i managed to add it to the end of the div but i am struggling to figure out how to add it to the front as well without using a new class. Is it possible to achieve it with only one class?
edit: my answer to the question with a different shape approach,
i think they are all 3 very useful:
.arrow {
margin-left: 100px;
position: relative;
background: pink;
width: 400px;
height: 100px;
text-align:center;
line-height:100px;
margin-bottom:10px;
}
.arrow:after {
border: solid transparent;
content: " ";
position: absolute;
border-bottom-color: white;
border-width: 50px;
left: 0;
top: 0;
transform: rotate(90deg);
}
.arrow:before {
border: solid transparent;
content: " ";
position: absolute;
border-bottom-color: pink;
border-width: 50px;
left: 400px;
top: 0;
transform: rotate(90deg);
}
<div class="arrow">
1
</div>
<div class="arrow">
2
</div>
You will need an inner element. What that element is, is purely up to you. Here I've used a <span> to make the left arrow appear.
.arrow {
float: left;
width: 128px;
height: 50px;
background-color: white;
border: 1px solid green;
position: relative;
margin-right: 40px;
text-align: center;
border-left: none;
}
.arrow:after,.arrow span:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 25px solid transparent;
border-left: 12px solid white;
z-index: 2;
}
.arrow:before,.arrow span:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 25px solid transparent;
border-left: 12px solid green;
z-index: 1;
}
.arrow span:after {
left: 0;
}
.arrow span:before {
left: 1px;
}
<div class="arrow"><span></span>1</div>
<div class="arrow"><span></span>2</div>
<div class="arrow"><span></span>3</div>
<div class="arrow"><span></span>4</div>
<div class="arrow"><span></span>5</div>
I have modified chevron shape, from this page: https://css-tricks.com/examples/ShapesOfCSS/ (borrowed idea, credits to mr Anthony Ticknor:))
.chevron {
position: relative;
text-align: center;
height: 60px;
width: 260px;
line-height:60px;
margin-bottom:10px;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 3%;
height: 50%;
width: 100%;
transform: skew(25deg, 0deg);
border:1px solid red;
border-bottom:none;
}
.chevron:after {
content: '';
position: absolute;
top: 50%;
left: 3%;
height: 50%;
width: 100%;
transform: skew(-25deg, 0deg);
border:1px solid red;
border-top:none;
}
<div class="chevron">1</div>
<div class="chevron">2</div>
So, one div, and two pseudo-elements, properly scewed, with borders hidden, where needed.