Can't make a css triangle for tooltip [duplicate]
up vote
0
down vote
favorite
This question already has an answer here:
Html/Css Triangle with pseudo elements
1 answer
I'm not able to make tooltip-arrow similar to this
Removing arrowTransform:"scale(2)" also doesn't help. Something I'm missing in css.
Here is the pen
javascript jquery html css tippyjs
edited Nov 20 at 7:35
piet.t
9,90463245
asked Nov 20 at 5:26
Ali Nouman
1,23552345
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 at 8:52
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
0
down vote
favorite
This question already has an answer here:
Html/Css Triangle with pseudo elements
1 answer
I'm not able to make tooltip-arrow similar to this
Removing arrowTransform:"scale(2)" also doesn't help. Something I'm missing in css.
Here is the pen
javascript jquery html css tippyjs
edited Nov 20 at 7:35
piet.t
9,90463245
asked Nov 20 at 5:26
Ali Nouman
1,23552345
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 at 8:52
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
This was too easy to create but you created that in a very complicated way
– Viira
Nov 20 at 5:42
solve it by using codepen.io/anon/pen/qQVoVN
– Ali Nouman
Nov 20 at 8:19
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This question already has an answer here:
Html/Css Triangle with pseudo elements
1 answer
I'm not able to make tooltip-arrow similar to this
Removing arrowTransform:"scale(2)" also doesn't help. Something I'm missing in css.
Here is the pen
javascript jquery html css tippyjs
edited Nov 20 at 7:35
piet.t
9,90463245
asked Nov 20 at 5:26
Ali Nouman
1,23552345
This question already has an answer here:
Html/Css Triangle with pseudo elements
1 answer
I'm not able to make tooltip-arrow similar to this
Removing arrowTransform:"scale(2)" also doesn't help. Something I'm missing in css.
Here is the pen
This question already has an answer here:
Html/Css Triangle with pseudo elements
1 answer
javascript jquery html css tippyjs
javascript jquery html css tippyjs
edited Nov 20 at 7:35
piet.t
9,90463245
asked Nov 20 at 5:26
Ali Nouman
1,23552345
edited Nov 20 at 7:35
piet.t
9,90463245
asked Nov 20 at 5:26
Ali Nouman
1,23552345
edited Nov 20 at 7:35
piet.t
9,90463245
edited Nov 20 at 7:35
piet.t
9,90463245
edited Nov 20 at 7:35
piet.t
9,90463245
9,90463245
asked Nov 20 at 5:26
Ali Nouman
1,23552345
asked Nov 20 at 5:26
Ali Nouman
1,23552345
asked Nov 20 at 5:26
Ali Nouman
1,23552345
1,23552345
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 at 8:52
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 at 8:52
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
This was too easy to create but you created that in a very complicated way
– Viira
Nov 20 at 5:42
solve it by using codepen.io/anon/pen/qQVoVN
– Ali Nouman
Nov 20 at 8:19
add a comment |
1
This was too easy to create but you created that in a very complicated way
– Viira
Nov 20 at 5:42
solve it by using codepen.io/anon/pen/qQVoVN
– Ali Nouman
Nov 20 at 8:19
1
1
This was too easy to create but you created that in a very complicated way
– Viira
Nov 20 at 5:42
This was too easy to create but you created that in a very complicated way
– Viira
Nov 20 at 5:42
solve it by using codepen.io/anon/pen/qQVoVN
– Ali Nouman
Nov 20 at 8:19
solve it by using codepen.io/anon/pen/qQVoVN
– Ali Nouman
Nov 20 at 8:19
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
.arrow_box {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.arrow_box .arrow_boxtext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.arrow_box .arrow_boxtext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.arrow_box:hover .arrow_boxtext {
visibility: visible;
opacity: 1;
}<!DOCTYPE html>
<html>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="arrow_box">Hover over me
<span class="arrow_boxtext">your text is here</span>
</div>
</body>
</html>DEMO to see other positions.
.arrow_box {
position: relative;
background: #ffffff;
border: 1px solid #bebebe;
display:inline-block;
padding:5px;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 7px;
margin-left: -7px;
}
.arrow_box:before {
border-color: rgba(190, 190, 190, 0);
border-top-color: #bebebe;
border-width: 8px;
margin-left: -8px;
}<html>
<body>
<div class="arrow_box">
<span>your text is here</span>
</div>
</body>
<html>edited Nov 23 at 12:39
Ankit Patel
31
answered Nov 20 at 7:27
RGhanbari
944
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
.arrow_box {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.arrow_box .arrow_boxtext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.arrow_box .arrow_boxtext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.arrow_box:hover .arrow_boxtext {
visibility: visible;
opacity: 1;
}<!DOCTYPE html>
<html>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="arrow_box">Hover over me
<span class="arrow_boxtext">your text is here</span>
</div>
</body>
</html>DEMO to see other positions.
.arrow_box {
position: relative;
background: #ffffff;
border: 1px solid #bebebe;
display:inline-block;
padding:5px;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 7px;
margin-left: -7px;
}
.arrow_box:before {
border-color: rgba(190, 190, 190, 0);
border-top-color: #bebebe;
border-width: 8px;
margin-left: -8px;
}<html>
<body>
<div class="arrow_box">
<span>your text is here</span>
</div>
</body>
<html>edited Nov 23 at 12:39
Ankit Patel
31
answered Nov 20 at 7:27
RGhanbari
944
add a comment |
up vote
0
down vote
.arrow_box {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.arrow_box .arrow_boxtext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.arrow_box .arrow_boxtext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.arrow_box:hover .arrow_boxtext {
visibility: visible;
opacity: 1;
}<!DOCTYPE html>
<html>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="arrow_box">Hover over me
<span class="arrow_boxtext">your text is here</span>
</div>
</body>
</html>DEMO to see other positions.
.arrow_box {
position: relative;
background: #ffffff;
border: 1px solid #bebebe;
display:inline-block;
padding:5px;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 7px;
margin-left: -7px;
}
.arrow_box:before {
border-color: rgba(190, 190, 190, 0);
border-top-color: #bebebe;
border-width: 8px;
margin-left: -8px;
}<html>
<body>
<div class="arrow_box">
<span>your text is here</span>
</div>
</body>
<html>edited Nov 23 at 12:39
Ankit Patel
31
answered Nov 20 at 7:27
RGhanbari
944
add a comment |
up vote
0
down vote
up vote
0
down vote
.arrow_box {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.arrow_box .arrow_boxtext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.arrow_box .arrow_boxtext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.arrow_box:hover .arrow_boxtext {
visibility: visible;
opacity: 1;
}<!DOCTYPE html>
<html>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="arrow_box">Hover over me
<span class="arrow_boxtext">your text is here</span>
</div>
</body>
</html>DEMO to see other positions.
.arrow_box {
position: relative;
background: #ffffff;
border: 1px solid #bebebe;
display:inline-block;
padding:5px;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 7px;
margin-left: -7px;
}
.arrow_box:before {
border-color: rgba(190, 190, 190, 0);
border-top-color: #bebebe;
border-width: 8px;
margin-left: -8px;
}<html>
<body>
<div class="arrow_box">
<span>your text is here</span>
</div>
</body>
<html>edited Nov 23 at 12:39
Ankit Patel
31
answered Nov 20 at 7:27
RGhanbari
944
.arrow_box {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.arrow_box .arrow_boxtext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.arrow_box .arrow_boxtext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.arrow_box:hover .arrow_boxtext {
visibility: visible;
opacity: 1;
}<!DOCTYPE html>
<html>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="arrow_box">Hover over me
<span class="arrow_boxtext">your text is here</span>
</div>
</body>
</html>DEMO to see other positions.
.arrow_box {
position: relative;
background: #ffffff;
border: 1px solid #bebebe;
display:inline-block;
padding:5px;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 7px;
margin-left: -7px;
}
.arrow_box:before {
border-color: rgba(190, 190, 190, 0);
border-top-color: #bebebe;
border-width: 8px;
margin-left: -8px;
}<html>
<body>
<div class="arrow_box">
<span>your text is here</span>
</div>
</body>
<html>.arrow_box {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.arrow_box .arrow_boxtext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.arrow_box .arrow_boxtext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.arrow_box:hover .arrow_boxtext {
visibility: visible;
opacity: 1;
}<!DOCTYPE html>
<html>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="arrow_box">Hover over me
<span class="arrow_boxtext">your text is here</span>
</div>
</body>
</html>.arrow_box {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.arrow_box .arrow_boxtext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.arrow_box .arrow_boxtext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.arrow_box:hover .arrow_boxtext {
visibility: visible;
opacity: 1;
}<!DOCTYPE html>
<html>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="arrow_box">Hover over me
<span class="arrow_boxtext">your text is here</span>
</div>
</body>
</html>.arrow_box {
position: relative;
background: #ffffff;
border: 1px solid #bebebe;
display:inline-block;
padding:5px;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 7px;
margin-left: -7px;
}
.arrow_box:before {
border-color: rgba(190, 190, 190, 0);
border-top-color: #bebebe;
border-width: 8px;
margin-left: -8px;
}<html>
<body>
<div class="arrow_box">
<span>your text is here</span>
</div>
</body>
<html>.arrow_box {
position: relative;
background: #ffffff;
border: 1px solid #bebebe;
display:inline-block;
padding:5px;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 7px;
margin-left: -7px;
}
.arrow_box:before {
border-color: rgba(190, 190, 190, 0);
border-top-color: #bebebe;
border-width: 8px;
margin-left: -8px;
}<html>
<body>
<div class="arrow_box">
<span>your text is here</span>
</div>
</body>
<html>edited Nov 23 at 12:39
Ankit Patel
31
answered Nov 20 at 7:27
RGhanbari
944
edited Nov 23 at 12:39
Ankit Patel
31
edited Nov 23 at 12:39
Ankit Patel
31
edited Nov 23 at 12:39
Ankit Patel
31
31
answered Nov 20 at 7:27
RGhanbari
944
answered Nov 20 at 7:27
RGhanbari
944
answered Nov 20 at 7:27
RGhanbari
944
944
add a comment |
add a comment |
1
This was too easy to create but you created that in a very complicated way
– Viira
Nov 20 at 5:42
solve it by using codepen.io/anon/pen/qQVoVN
– Ali Nouman
Nov 20 at 8:19