I have a CSS tooltip set-up to appear to the right of a link when hovered over, and it is working correctly when the link all appears on one line.
However, if the linked text runs too long and goes onto the next line, the tooltip won't appear to the right of the last word any longer.
This content section of this post is an example of what I'm talking about: http://blog.betbright.com/top-stories/premier-league-tactical-analysis-and-betting-tips-four-things-we-learnt-25th-august/
Some of the links are one on line (working correctly) some are on two lines (not working).
Here is my code for this tooltip:
a.CTA {
position: relative;
display: inline;
}
a.CTA span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.CTA span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #00A1E0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.CTA span {
visibility: visible;
opacity: 1;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
Any help with this would be appreciated.
Thanks,
Paul
Here is how i would do it,
a.CTA {
position: relative;
display: inline;
}
a.CTA span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.CTA span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #00A1E0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.CTA span {
visibility: visible;
opacity: 1;
/* left: 100%; */
/* top: 50%; */
margin-top: -4px;
margin-left: 15px;
z-index: 999;
}
I wouldn't use top and left property, they position elements absolutely.
In the case where you have two lines top:50% positions the tooltip between the two lines.
I commented out top/left and adjusted the margin-top.
http://www.w3schools.com/cssref/pr_pos_top.asp
Best
y_s_f
You need to remove height.
a.CTA span{
position: absolute;
width: 110px; /*then make adjustment here */
color: #FFFFFF;
background: #00A1E0;
display: block;
/* height: 30px; */
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
Then the long text will be fit inside the tooltip.
I think you can use float: right; for your tooltip, then display: inline-block;
Related
I am trying to style button like this:
Now I first though I could just style it with an ::after element attached to the button.
Currently I have this (using sass syntax):
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
z-index: 10;
&::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -2;
}
}
But this renders something which looks a little different:
The rectangle more to the right is my :afterelement.
It is indeed behind the text «Button» (without the z-Index it would just be in front), but it does not go behind the other rectangle.
How could I style this correctly?
Thanks for the help
Cheers
Remove the z-index: 10 from the button. When the parent element (button in this case) have a z-index value it becomes the root element of the stacking context, and you can't move the child under it.
You can read more about stacking context and stacking order in the great article What No One Told You About Z-Index.
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
}
button::after {
content: '';
display: block;
position: absolute;
top: -10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
body {
padding: 20px;
}
<button>Button</button>
I have added a few little things to the code. but this seems to work for me. There might be a simpler way, but the flip, flip works. :)
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
left: 20px;
z-index: 10;
transform: rotateY(180deg);
}
button::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
.buttonz{
transform: rotateY(180deg);
}
<button>
<div class="buttonz">
Button
</div>
</button>
I'm requesting your help with a .css hr class
I'm trying to figure out how to make a double border like this:
Here's what i did:
hr.style15 {
border-top: 4px double black;
}
hr.style15:after {
content: 'SHIPPING INFO';
display: inline-block;
position: relative;
top: -15px;
left: 40px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}
My questions are:
1) How do I get rid of the inline-block below the 2 lines? I've tried by deleting the inline-block sentence but it doesn't work.
2) Can I add font-family and font size to this?
3) Is it possible to increase the space between the 2 lines without increasing the width?
Basically I believe I'd do it differently. Using both :after and :before for the lines will help you drastically on putting a text on top of it.
So I prepared this CodePen for you. Basically what I did was using an :after and a :before (as I told you before) for the border-lines and after that I added a span with a background-color (in this case white) on top of the border-lines (look at the z-index).
.container {
width: 800px;
position: relative;
}
.double-bar {
&:after {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 9px;
left: 0;
z-index: 1;
}
&:before {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 13px;
left: 0;
z-index: 1;
}
span {
z-index: 2;
position: relative;
background-color: white;
left: 40px;
padding: 0 7.5px;
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
}
}
You can see a demo of this.
I hope this helps!
Please have a check with this:-
HTML
<h1 class="title"><span>Shipping info</span></h1>
CSS
h1.title {
margin-top: 0;
position: relative;
}
h1.title:before {
content: "";
display: block;
border-top: solid 1px black;
width: 100%;
height: 2px;
position: absolute;
top: 50%;
z-index: 1;
border-bottom: 1px solid #000;
}
h1.title span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
margin-left: 50px;
}
I am on the process in learning css.
I am trying to display the image in the middle of the screen upon user hover their mouse in the gallery.
however, the image hover within the image itself.
this is my code.
jsfiddle.net/y9w5ym72/1/
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px 'Lucida Sans',sans-serif;
}
.wrap {
overflow: hidden;
margin: 50px;
}
.box {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
color: #FFF;
}
.boxInner {
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
overflow: hidden;
background: #66F;
}
.boxInner img {
width: 100%;
}
.thumbnail:hover img{
border: 1px solid transparent;
}
.thumbnail span{
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
width:70%;
height: auto;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 230px;
z-index: 50;
}
First point is you need to hide the first image. So that only you can see the second one. Second point is no need position:absolute, left:-1000px; styles for the inside span.
.thumbnail:hover > img{
border: 1px solid transparent;
display:none;
}
.thumbnail span{
/*position: absolute;
left: -1000px;*/
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}
DEMO
you have to use position :absolute to achieve that fiddle
.box:hover{position:absolute; top:38%; left:38%; z-index:200;}
I'm stuck with CSS pseudo-elements :before and :after when I was trying to stylize button's background. The problem is this: when I'm using only positive z-indices to place span itself and its pseudo-elements in right order, :before and :after are always overlapping the element. When I'm using negative z-indices, it's all right, but I don't want to change other underlying elements' z-indices just to make the button working.
So that's the problem and that's the goal to be achieved except the negative z-indices.
Problem code:
.button {
display: inline-block;
z-index:3;
position: relative;
left: 25px;
top: 25px;
height: 60px;
padding-left: 20px;
padding-right: 20px;
background: rgb(96,96,100);
border: 1px solid #202020;
color: #dddddd;
}
.button:before {
content: "";
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
background: rgba(85,85,90, .7);
padding: 10px;
left: -10px;
top: -10px;
}
.button:after {
content: "";
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
background: rgba(85,85,90, .4);
padding: 20px;
left: -20px;
top: -20px;
}
go for borders ! :)
http://jsfiddle.net/RwGV9/1/
basically
border:solid 10px rgba(85,85,90, .7);
left: -10px;
top: -10px;
and same thing for the other one with the right left, top and padding !
if you don't mind putting attributes in your html, you could do like that :
http://jsfiddle.net/RwGV9/
in the HTML :
<span data-text='button !' class="button">button</span>
and in the CSS :
.button:before {
content: attr(data-text);
Basically put the text in the highest layer using button using content: attr(); and make you text disappear in the deepest one (bg color = type color is not very elegant but it keeps the text of the button selectable for the user !)
http://jsfiddle.net/D8gDK/
.button {
display: inline-block;
position: relative;
left: 25px;
top: 25px;
width: 100px;
height: 60px;
padding-left: 20px;
padding-right: 20px;
background: rgb(96,96,100);
border: 1px solid #202020;
color: #dddddd;
}
.button:before {
content: "";
display: block;
width: 140px;
height: 60px;
position: relative;
background: rgba(85,85,90, .7);
border: 10px solid rgba(85,85,90, .4);
padding: 10px;
left: -40px;
top: -20px;
}
I got rid of the second pseudo element and put the before behind the button.
Might need some work with the colors...
Works only if you know the width of the button, though
I need show a notication modal window.. But since its a fluid layout the position changes on bigger screens.
How can i position the modal window below the link like in image. I want it in the exact position. How do i go about doing it?
This should work as a base for you.
HTML
<div class="notificaton-bar">
<div class="notice">Notification
<div>
Here is the applicable note.
</div>
</div>
</div>
CSS
.notificaton-bar {
background-color: #999999;
padding: 0 10px;
}
.notice {
position: relative;
display: inline-block;
background-color: inherit;
font-size: 1.5em;
min-width: 140px;
padding: 10px 5px;
text-align: center;
}
.notice div {
display: none;
width: 130px;
padding: 10px;
font-size: .75em;
text-align: left;
background-color: inherit;
border-radius: 10px;
position: absolute;
top: 100%;
left: 50%;
margin-left: -75px;
margin-top: 10px;
}
.notice div:before {
content: '';
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 11px solid #999999;
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
.notice:hover div {
display: block;
}