I have the following html:
<div class="container">
<span class="word-container" >
<span tooltip-def="To sign or give formal approval to.">
<span class="define-word highlight-word">ratifying</span>
</span>
</span>
</div>
CSS:
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 50%;
position: absolute;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The tooltip is cut off on the left side. I tried overflow: visible and higher z-index on .word-container [tooltip-def]:after, but none of the working.
Here is the jsfiddle demo: https://jsfiddle.net/mddc/5dtwr6zc/10/
How can I make minimal CSS changes to make the tooltip visible? Move to the right side when the left side touches the browser edge?
you are going great you only need to change the css. below is the css code apply and check.
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 10%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 20%;
position: relative;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
I've made the changes which can be viewed in the fiddle below
https://jsfiddle.net/5dtwr6zc/14/
.test{
overflow: visible;
}
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 150%;
position: absolute;
transform: translateX(-47%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The problem was the positioning of the after psuedo element. But I would strongly suggest to make the positioning dynamic as per the context using JavaScript
Related
I have before like below and I want rotate just background not label.
How I can do it ?
div {
width: 50px;
height: 5px;
position: relative;
background: #ff756b;
margin-top: 55px;
}
div::before {
content: 'lable';
position: absolute;
left: -5px;
top: -33px;
background: red;
color: white;
border-radius: 20px 20px 3px 20px;
transform: rotate(45deg);
width: 22px;
height: 22px;
}
<div></div>
You can add :after with div and add content
div {
width: 50px;
height: 5px;
position: relative;
background: #ff756b;
margin-top: 55px;
}
div:after {
content: 'Lable';
font-size: 11px;
position: absolute;
left: -5px;
top: -29px;
color: #fff;
}
div::before {
content: '';
position: absolute;
left: -5px;
top: -33px;
background: red;
color: white;
border-radius: 20px 20px 3px 20px;
transform: rotate(45deg);
width: 22px;
height: 22px;
}
<div></div>
transform: rotate (45deg);
Will rotate the complete element, including content and background.
If you want to rotate only the background then you need to keep the background separate or you can add your label in actual element instead of pseudo-element.
You can put the text into an after pseudo element which is not rotated.
div {
width: 50px;
height: 5px;
position: relative;
background: #ff756b;
margin-top: 55px;
}
div::before,
div::after {
position: absolute;
left: -5px;
top: -33px;
width: 22px;
height: 22px;
}
div::before {
content: '';
background: red;
border-radius: 20px 20px 3px 20px;
transform: rotate(45deg);
}
div::after {
content: 'lable';
color: white;
}
<div></div>
However, be aware of accessibility issues. That text may not get read out by a screen reader and if it is important for the user to know it is there is may be better to put the text in a label element actually within the HTML. You can still style it the same way so it is within the red 'bubble'.
I m trying to design a both and ribbon shape button on hover should show horizontal line and icon on both ends.
https://imgur.com/a/iYvJUzJ
.right-left-flag {
position: relative;
background: black;
padding: 22.1px 40px;
color: #fff;
text-transform: uppercase;
}
.right-left-flag:before,
.right-left-flag:after {
border-color: #000 transparent;
top: 0;
}
.right-left-flag:before,
.right-left-flag:after {
border-style: solid;
height: 0;
width: 0;
display: block;
content: "";
position: absolute;
}
.right-left-flag:before {
left: -19.5px;
border-width: 33px 0 28.5px 20px;
}
.right-left-flag:after {
right: -19.5px;
border-width: 33px 20px 28.5px 0;
}
Read More
Hope this will help you get some idea about how to do.
You can add any font icon to the after and before elements of the span inside the content.
.right-left-flag {
position: relative;
background: black;
padding: 22px 40px;
color: #fff;
text-transform: uppercase;
top: 30px;
left: 30px;
display: inline-flex;
}
.right-left-flag:before,
.right-left-flag:after {
border-color: #000 transparent;
top: 0;
}
.right-left-flag:before,
.right-left-flag:after {
border-style: solid;
height: 0;
width: 0;
display: block;
content: "";
position: absolute;
}
.right-left-flag:before {
left: -19.5px;
border-width: 33px 0 28.5px 20px;
}
.right-left-flag:after {
right: -19.5px;
border-width: 33px 20px 28.5px 0;
}
.right-left-flag:hover>span {
opacity: 1
}
.right-left-flag>span {
opacity: 0;
position: absolute;
left: 5px;
right: 5px;
top: 50%;
transform: translateY(-50%);
height: 1px;
background: #fff;
transition: all .2s;
}
.right-left-flag>span:before {
content: ':)';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.right-left-flag>span:after {
content: ':)';
position: absolute;
left: auto;
right: 0;
top: 50%;
transform: translateY(-50%);
}
Read More<span></span>
I'm trying to recreate the following image in CSS:
I've already started making the box and arrow (see below) and now my only problem is to make the left edge of the arrow round with CSS only just like in the image.
Any idea? Thanks.
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 0;
height: 0;
border-style: inset;
border-width: 0 32px 20px 0;
border-color: transparent #ff0d1e transparent transparent;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
<span class="speech-bubble"></span>
You could do something like this using transform: skew(); and border-radius. I added z-index: -1 to the pseudo-element so it sits behind the <span> (I'm assuming you will put text inside).
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 70px;
height: 30px;
background-color: #ff0d1e;
transform: skew(55deg);
transform-origin: top right;
border-radius: 15% 0 0 0 / 25%;
z-index: -1;
}
<span class="speech-bubble"></span>
It's still slightly pointed, but if you used corner-specific border-radius properties you can get a similar effect.
Here I used border-top-left-radius and border-bottom-left-radius.
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 0;
height: 0;
border-style: inset;
border-width: 0 32px 20px 0;
border-color: transparent #ff0d1e transparent transparent;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
border-top-left-radius:80%;
border-bottom-left-radius:200%;
}
<span class="speech-bubble"></span>
I have circle shapes that are made of CSS, i'm trying to put a tool-tip that appears when i hover into the circle, any ideas on how to do that?
Here is my circle code:
#circle1 {
width: 52px;
height: 52px;
background: #f5e25d;
opacity: 0.9
-moz-border-radius: 50%;
-webkit-border-radius: 50px;
border-radius: 50px;
}
<div id="circle1"></div>
You can achieve this by putting an HTML element inside #circle1 (I used a span) for the tooltip, and using #circle1:hover to display the tooltip. Then I put a triangle as the ::after pseudo-element for the span. I used a CSS Triangle Generator to create the tooltip triangle.
.wrap {
overflow: auto;
padding: 10%;
width: 100%;
background: #eee;
box-sizing: border-box;
}
#circle1 {
display: block;
width: 52px;
height: 52px;
background: #f5e25d;
opacity: 0.9 -moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin: 20px auto auto;
position: relative;
}
span.tooltip {
visibility: hidden;
position: absolute;
bottom: calc(100% + 20px);
left: 50%;
transform: translateX(-50%);
width: 200px;
background: #444;
color: white;
padding: 10px;
box-sizing: border-box;
border-radius: 4px;
text-align: center;
font-family: sans-serif;
}
span.tooltip::after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: #444444 transparent transparent transparent;
}
#circle1:hover span.tooltip {
visibility: visible;
}
<div class="wrap">
<a id="circle1">
<span class="tooltip">Tooltip, baby, yeah!</span>
</a>
</div>
I'm trying to cross vertically the rotated square with a line created using pseudo-element.
.marker{
display: block;
width: 16px;
height: 16px;
border: solid 2px #896f56;
transform: rotate(45deg);
}
.marker:before{
content: "";
width: 2px;
height: 40px;
background-color: #896f56;
display: block;
transform:rotate(-45deg);
margin-left: 19px;
}
https://jsfiddle.net/npvfu3ff/
But the rotate rule is affecting the pseudo element making it difficult to position.
Here is an image of what I need:
Changed the way to do it, so that it will center automatically
.marker{
display: block;
width: 16px;
height: 16px;
border: solid 2px #896f56;
transform: rotate(45deg);
margin-top: 30px;
}
.marker:before{
content: "";
width: 2px;
height: 40px;
background-color: #896f56;
display: block;
margin: auto;
margin-top: 50%;
transform:rotate(-45deg) translatey(-50%);
transform-origin: top center;
}
<div class="marker"></div>
I detached marker line from rotation by using :before and :after for square and line, so they don't affect each other.
https://jsfiddle.net/wmqhd72u/
.maker2 {
position: relative;
}
.maker2:hover:before {
transform: rotate(405deg);
}
.maker2:before,
.maker2:after {
position: absolute;
}
.maker2:before {
display: block;
content: "";
width: 16px;
height: 16px;
border: solid 2px #896f56;
top: 0;
left: 0;
transform: rotate(45deg);
transition: all 2s;
}
.maker2:after {
content: "";
position: relative;
top: -8px;
left: -8px;
width: 2px;
height: 40px;
background-color: #896f56;
display: block;
margin-left: 19px;
top: 8px;
left: -10px;
}