I have a CSS tooltip that is being cut off when the hovered item is too close to the edge of the content area. See the links towards the bottom of this post: http://blog.betbright.com/top-stories/manchester-united-v-club-brugge-betting-preview/
Here is the code I'm using for the tooltip:
a.tooltip {
position: relative;
display: inline;
}
a.tooltip span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltip span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #00A1E0;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltip span {
visibility: visible;
opacity: 1;
bottom: 30px;
left: 100%;
margin-left: -76px;
z-index: 999;
}
Any solutions you can recommend to stop the tooltip being cut would be appreciated.
Thanks,
Paul
You should set the overflow property on your .entry-content class to visible instead of hidden. Your current setting hides everything that does not fit within that div. Since your tooltip would be displayed partly outside your .entry-content div, a part is cut of unless you change the overflow property. So, your error is not in the tooltip, it's in a parent element.
Related
I have a button with only a single tag (<a>). I want to skew the background of the button and keep the text as is, so I'm using this code, which is working as expected in my Codepen example:
<a class="et_pb_button et_pb_pricing_table_button" href="#">$200 / Month</a>
.et_pb_pricing_table_button {
margin: 10px;
cursor: pointer;
background-color: transparent;
border: none;
height: 50px;
padding: 10px 60px;
position: relative;
color: #000000;
font-weight: bold;
text-decoration: none;
}
.et_pb_pricing_table_button:after {
z-index: -1;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: skewX(-15deg);
border-radius: 0px;
background-color: #ffd100;
}
.et_pb_pricing_table_button:hover:after{
background-color: skyblue;
}
However, when I apply that code to my page, it is not rendering as expected (not visible). I can't find anything that is stopping this from working (the parent elements are position: relative). I also tried increasing the z-index of the pseudo selectors, but that didn't help either. What am I missing?
I want to create an html link that has this form:
when that link is hovered or focused that form should change its color.
The text in the link should be in the center of the link, normally that would mean display: block.
this mustn't have problems with using the same way to create a link the other direction in the same row. (I had problems with this when I used a technique with position: relative)
What I have already tried:
making a normal row and then fixing divs with height:0; width: 0; position: relative; top: 1.4rem; left: 0; border: 0.7rem solid white; border-right: 0.7rem solid transparent;, for the other direction the opposite way, but the two divs above the row didn't appeared in the same height.
making the triangles in the left not changing color when hovered or focused, but I didn't like that.
instead of using the border-hack with position: relative I used floats to fix them. This didn't worked when I also wanted to have the linktext vertically centered.
You can achieve the shape using pseudo elements like :before and :after
.box {
display: block;
position: relative;
width: 100px;
height: 50px;
background: #000;
margin-left: 20px;
color: #fff;
text-align: center;
line-height: 50px;
transition: all 0.5s ease;
cursor: pointer;
}
.box:after {
content: '';
position: absolute;
height: 0;
width: 0;
border: 25px solid transparent;
border-right: 25px solid #000;
left: -50px;
transition: all 0.5s ease;
}
.box:hover {
background: #eee;
color: #000;
}
.box:hover::after {
border-right: 25px solid #eee;
}
<a class='box'>Demo Link</a>
I'm trying to move the entire border "up" so the bottom border lines up with the middle of the text. Very similar to this question, but I want to keep the left and right borders (they must be pushed up too). The reason for this is the text relates to the information above it.
https://jsfiddle.net/8c039kzy/
My jsfiddle is close but the left / right borders don't go high enough. So I want something like this:
|--------Info above is Important!--------|
(But the bottom of the left / right borders don't leak down past the horizontal border)
Use a :before pseudo element to draw the horizontal line instead.
h5 {
width: 100%;
text-align: center;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 10px 0 20px;
position: relative;
}
h5:before, h5:after {
content: '';
position: absolute;
}
h5:before {
top: 50%;
background: #000;
height: 1px;
left: 0; right: 0;
}
h5:after {
background: #fff;
top: calc(50% + 1px);
bottom: 0;
left: -1px; right: -1px;
}
span {
background: #FFF;
padding: 0 10px;
position: relative;
z-index: 1;
}
<h5><span>Refer to Info above</span></h5>
I think you want this :
h5 {
position: relative;
text-align: center;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
h5 span {
background: white;
padding: 0 15px;
position: relative;
z-index: 1;
}
h5:before {
background: black;
content: "";
display: block;
height: 1px;
position: absolute;
top: 50%;
width: 100%;
}
h5:before {
left: 0;
}
<h5><span>Refer to Info above</span></h5>
I created a sides line and I used just right and left borders, is this that you want?
h5 span:before, h5 span:after {
display:inline-block;
content: "";
vertical-align: bottom;
height: .5em;
border-top: 1px solid #000;
width: 200px;
}
<h5><span>Refer to Info above</span></h5>
other way to do this :) but with lines of given width
I have a input's tooltip that I am trying to set a max-width, or basically
"If the text is smaller than 300px, tooltip width should be the
necessary to contain the element. If the text occupies more than
300px, line break and contain it."
In this fiddle: http://jsfiddle.net/hrfz442d/11/ it works for Chromium, but in Firefox 38, it doesn't take in account max-width, and seems to have a fixed width which it is using.
Firefox JSFiddle:
CSS:
.tooltip {
position: relative;
display: inline;
}
.tooltip span {
position: absolute;
/*min-width: 100px;*/
max-width: 150px;
color: #FFFFFF;
background: #327FBA;
min-height: 32px;
line-height: 16px;
text-align: center;
visibility: hidden;
border-radius: 5px;
font-size: 12px;
display: table;
padding: 0 10px; /* optional */
}
.tooltip span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0;
height: 0;
border-right: 8px solid #327FBA;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.tooltip:hover span {
visibility: visible;
opacity: 0.9;
left: 100%;
top: 50%;
margin-top: -16px;
margin-left: 15px;
z-index: 999;
}
HTML:
<div class="tooltip">
<input type="text" placeholder="Nombre/s" name="dp_nombre">
<span>Nombre completo asd as dasd as dasd</span>
</div>
EDIT: In fact I changed the tooltip's words to be a a a a and Firefox is taking the less possible width to contain the words, then line break after each word (letter), so I have 4 lines now.
Add width: 100%, and remove display: table (you don't need it).
Please check this Fiddle:
http://jsfiddle.net/5WGLs/
If you hover over basker-holder, you can see that it's child-> shopping-cart top border is not behind it's parent. It should be white. The effect I am looking for is this:
http://i.stack.imgur.com/XBV82.png
Simply add position: relative;, background-color: #fff; and z-index: 2000; to .cart-btn.This way, .cart-btn will be over .shopping-cart and the background-color will hide to border-top.
View exemple: http://jsfiddle.net/5WGLs/3/
Hope this help.
You could use z-index. Demo
But you should read What No One Told You About Z-Index, because using such large z-indices is useless.
jsfiddle DEMO
Playing with the z-index and background; we can acheive that
edited css
.cart-btn {
color: #333;
display: inline-block;
margin-top: 12px;
padding: 5px 22px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
line-height: 30px;
border: 1px solid #fff;
position: relative;
z-index:10;
background:#fff;
}
.shopping-cart {
position: absolute;
background: #FFF;
left: 0;
text-align: left;
width: 160px;
border: 1px solid #fe4365;
top: 52px;
opacity: 0;
transform: translateY(25px) rotateY(50deg);
z-index:-1;
}