Trying to create a CSS-ONLY tooltip. But the problem is, when the tooltip containing word is at extreme left or right, the tooltip gets out of screen resulting a lesser display of tooltip text.
How can I solve this?
enter image description here
overflow x of body is hidden (Mandatory)
Following is my CSS and HTML:
[data-ToolTip] {
position: relative
}
[data-ToolTip]:before {
content: '';
display: none;
border: 5px solid #000;
border-top-color: #000;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: -7px;
left: 10px;
z-index: 8;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
[data-ToolTip]:after {
display: none;
content: attr(data-ToolTip);
position: absolute;
top: -35px;
left: 0px;
padding: 0px 8px;
background: #000;
color: #fff;
z-index: 9;
font-size: 13px;
height: 28px;
line-height: 28px;
line-break: auto;
white-space: nowrap;
word-wrap: break-word;
}
[data-ToolTip]:hover:before,
[data-ToolTip]:hover:after {
display: block;
}```
And HTML:
```<p style="text-align: right;"><span data-ToolTip="Version Control System">VCS</span></p>
Related
This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 3 years ago.
I am trying to create a button with chopped corner, the only challange is to make that corner transparent, instead of background color of that corner.
Attached the exmple I am trying to achieve
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
width: 24px;
height: 24px;
background: #cccccc;
position: absolute;
right: -12px;
bottom: -12px;
transform: rotate(-132deg);
}
<div class="wrapper">
This is button
</div>
I believe that modifying the button's background - using linear-gradient from transparent to the specific color - is what you're looking for:
background: linear-gradient(315deg, transparent 15px, #07926D 0px);
And in context:
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
background: linear-gradient(315deg, transparent 15px, #07926D 0px);
}
<div class="wrapper">
This is button
</div>
You can do something like this, I am in hurry so made this, You can change anything as per your need.
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 10px 16px 35px;
position: relative;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
width: 0;
position: absolute;
height: 0;
border-style: solid;
border-width: 26px 0px 20px 20px;
border-color: transparent transparent transparent #07926D;
right: -20px;
top: 2px;
}
a.btn-border-tilt:before {
content: "";
width: 0;
position: absolute;
height: 0;
border-style: solid;
border-width: 0px 0 60px 30px;
border-color: transparent transparent transparent #07926D;
right: -4px;
top: -15px;
transform: rotate(90deg);
}
<div class="wrapper">
This is button
</div>
Check this with after and before and changes padding for text center
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 12px 16px 30px;
position: relative;
text-decoration: none;
}
.btn-border-tilt:before {
content: "";
width: 18px;
height: 30px;
background: #07926D;
position: absolute;
right: -18px;
top: 0px;
}
.btn-border-tilt:after {
content: "";
width: 0;
height: 0;
position: absolute;
width: 0;
height: 0;
border-top: 18px solid #07926D;
border-right: 18px solid transparent;
right: -18px;
bottom: 0px;
}
<div class="wrapper">
This is button
</div>
Create a triangle at the bottom.
Reference: CSS Tricks
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
border: 12px solid #aaaaaa;
border-left-color: transparent;
border-top-color: transparent;
}
<div class="wrapper">
This is button
</div>
I am having trouble getting my pseudo element to show up behind the parent element. I am trying to create a button that looks like this:
however I can't figure out how to get the brown to display behind the button. All I'm getting is this:
My styling is:
.orangeBorderedButton{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
position: relative;
margin:10px 25px;
background-color: transparent;
border-radius: 10px;
border:1px solid white;
z-index: 3;
}
.orangeBorderedButton:after{
position: absolute;
height: 100%;
content: '';
width: 100%;
background-color: $orange;
left: -2px;
bottom: 2px;
border-radius: 10px;
z-index:1;
}
I would just turn your css around and give the background to the button and not the after element, and you should be good.
http://jsfiddle.net/zt4yufx0/28/
body{
background:black;
}
.orangeBorderedButton{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
position: relative;
margin:10px 25px;
background-color: transparent;
border-radius: 3px;
border-color: transparent;
background-color: #aa7936;
z-index: 5;
padding: 7px 15px 3px 25px;
}
.orangeBorderedButton:after{
position: absolute;
border:1px solid white;
height: 100%;
content: '';
width: 100%;
left: 5px;
bottom: -5px;
border-radius: 3px;
z-index:-5;
}
<a data-sr>
<button class="button large orangeBorderedButton">See All</button>
</a>
Use background color in button CSS and give border to :after, See this code
.orangeBorderedButton{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
position: relative;
margin:10px 25px;
background-color: #aa7936;
border-radius: 10px;
border: 0px;
z-index: 3;
}
.orangeBorderedButton:after{
position: absolute;
height: 100%;
content: '';
width: 100%;
border:1px solid white;
left: 2px;
top: 2px;
border-radius: 10px;
z-index: 4;
}
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 want to drop lined shadow on a link or button. Kind of flat style. You can see this implemented already here
a.button {
position: relative;
z-index: 2;
display: inline-block;
padding: 10px;
text-decoration: none;
color: #fff;
font-family: arial;
}
a.button:before {
content: "";
display: block;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
right: 0px;
bottom: 0;
border: 3px solid #000;
}
a.button:after {
content: "";
display: block;
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
background-color: red;
border: 3px solid red;
right: -6px;
bottom: -6px;
}
a.button:hover:after {
background-color: green;
border: 3px solid green;
}
Click Here
But the problem is that the box and the shadow are overlapping on the button text so the button text is not visible. Is there any way to fix that? I don't want to add any extra html tags like span into this as the links are going to be auto generated using Wordpress. So that is why I have used before-after pseudo css.
Set :after z-index to -1. to send it backward futher
a.button:after {
z-index: -1;
}
This is my code
.privacycheck1 {
position: relative;
top: 265px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 35px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
<div class="privacycheck1"></div>
I want to make it so when someone hovers over the privacycheck1, I want them to see an arrow connecting to the box pointing at privacycheck1's circle.
Is there anyway to make a class in a class?
You can use an extra span element to create this.
First create the tail of the arrow using the span and then create the arrow head using the border-hack on the after pseudo-element. You can find a wide range of arrows here
.privacycheck1 {
position: relative;
top: 30px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 30px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 30px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
.arrow {
position: absolute;
width: 15px;
height: 5px;
background: green;
left: 20px;
top: 8px;
display:none;
}
.arrow:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid green;
left:15px;
top:-2px;
display:none;
}
.privacycheck1:hover span,.privacycheck1:hover span:after{
display:block;
}
<div class="privacycheck1"><span class="arrow"></span>
</div>
You don't need an extra span. You can use an :after just like you used a :before.
.privacycheck1:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 100%;
width: 0;
height: 0;
margin-top: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #CF0000;
}
If you use top: 50%; and margin-top negative half the arrow height it will always be perfectly aligned in the vertical center. In this case I gave the arrow height: 30px; so the margin-top is -15px
Oh and you made a mistake in you hover:before. 'font-weight: 100px;' doesn't exist, you can use 'bold', '700' or another value.
Another tip, add this to your hover:before
left: calc(100% + 15px);
This way your box will always have the right distance between the 'dot' and the text box. The box will use the width of the parent (the element with position: relative;) + 15px (the width of the arrow) to align from the left.