I want to put a css tooltip on links inside a table.
Here's my markup :
<a class="tooltip" href="/link">
My link text
<span class="tooltip-span">
my tooltip text
</span>
</a>
Here's my css :
.tooltip {
cursor: help;
text-decoration: none;
position: relative;
}
.tooltip .tooltip-span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover .tooltip-span {
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
padding: 0.8em 1em;
background: #F9F9F9;
border: 1px solid #D9D9D9;
color: black;
}
But, in some of my tables, the <td> tag has the css property overflow: hidden; causing the tooltip to stay hidden.
I really don't know how the overflow property could break my tooltip like that.. Can someone explain to me the relation ?
Thanks
Remove the overflow:hidden property? I can't think of any reason why you would use one inside a td unless you were trying to suppress the overflow from a div inside of it.
If the tooltip resides inside of the <td> then its susceptible to overflow, and thusly it is hidden as you instructed it to be using overflow:hidden.
Related
I have created an animated rotated button and I would like it to have a shadow that is paralel to the x-axis. Now the shadow is not, do You have an idea how to make it? Thank You. This is the css of the existing button and the link to the codepan with "the live example".
.btnMail{
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
box-shadow: 0 8px 6px -6px black;
}
https://codepen.io/hubkubas/pen/dmJjWB
Based on the understanding of your question, you can achieve fancy 3D looking shadows or custom depth shadows by applying shadow-box property to pseudo elements which you can then further manipulate, to get the desired shadows.
Here is a quick-fix that probably shows the type of shadow you want:
/* btn */
.btnMail{
width: 65px;
height: 60px;
display: inline-block;
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
}
.btnMail:hover {
transition: 0.30s;
transform: rotate(0deg);
box-shadow: 0px 8px 6px -6px black;
background-color: rgba(255, 0, 54, 0.8);
}
.btnMail:active {
box-shadow: 0 6px 6px -6px black;
transition: 0.30s;
}
#shadow{
z-index: -111;
width: 65px;
height: 50px;
position: absolute;
top: 17px;
left: 5px;
box-shadow: 0px 10px 16px -9px black;
}
<button class="btnMail shadow"><i class="fa fa-envelope"></i></button>
<div id="shadow">
</div>
(Note: I have used a seperate div tag for the shadow, since the animation you apply on the button will also be applied on the shadow).
You can learn more about how to create custom shadows on this link.
See the following fiddle:
https://jsfiddle.net/b6bpzsg7/
It comprises 3 portfolio items which are divs with class porthole which just have left and right padding for offset to neighbour.
<div class="col-md-4 porthole">
<div class="portbox text-center">
<div class="portplace">
<div>Coming soon</div>
</div>
<header>Second</header>
</div>
</div>
The inner div has a class of portbox which I can see in chrome developer does not expand vertically to take up all of the porthole surrounding it. portbox has no padding, border or margin
Within the portbox there is a placeholder div with class portplace that has a margin of 15px all around and padding top and bottom of 30px. In chrome developer I see that the top margin extends outside of the enclosing portbox to the top margin of the outside porthole.
Can someone enlighten me?
EDIT
.portrow {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
background-color: #888;
}
.porthole {
padding: 0px 15px 0px 15px;
overflow: auto;
}
.portbox {
border-width: 1px;
border-color: #000;
border-radius: 5px;
background-color: #fff;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.portplace {
margin: 15px 15px 15px 15px;
padding: 30px 0px 30px 0px;
background-color: lightgray;
color: darkslategrey;
}
Add overflow: auto to your parent div:
https://jsfiddle.net/pavy/b6bpzsg7/2/
.portbox {
border-width: 1px;
border-color: #000;
border-radius: 5px;
background-color: #fff;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
overflow: auto; // you need this
}
Read up on collapsing margins:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Add overflow="hidden" to the portbox to solve this problem.
I have a div in which I am trying to place div in the form of a box. The problem is I need to use position:absolute to maintain the flexibilty. But when I apply position: absolute the box goes out of the parent div.
Image with
.new-div{
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.7);
/*float: left;*/
min-width: 3em;
min-height: 2em;
max-width: 48ex;
margin: 2em;
padding: 1em;
margin-left: 70%;
position: absolute;
word-wrap:break-word;
top: 52%;
/*left: 50%;*/
/*right: -2%;*/
/*transform: translateX(-50%) translateY(-50%);*/
border: 1px solid rgb(200, 200, 200);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 16px;
box-shadow: 2px 5px 5px rgba(0,0,0,0.2);
}
The moment I remove position: absolute it works fine.
But I need to use position:absolute. Can somebody please suggest a workaround.
Parent div position should be relative.
<div style='position:relative'>
<div class='new-div'>
</div>
</div>
I am using bootstrap 2. I have dropdowns that contain a variety of elements that fill the dropdown. I set overflow to hidden so that the border radius is retained. When position is set to absolute the pseudo before/after arrow disappears. They remain visible when position is static, but I must use position absolute.
HTML:
<div class="dropdown">
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
CSS:
.dropdown {
position: relative;
}
.dropdown-menu {
position: static;
display: block;
overflow: hidden;
float: left;
min-width: 0;
padding: 5px 0;
margin: 0;
list-style: none;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
li {
padding: 4px 10px;
}
.dropdown-menu:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 16px;
}
.dropdown-menu:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -5px;
left: 17px;
}
Here is a fiddle: http://jsfiddle.net/rdellara/4epZV/
Change position: static; to absolute in .dropdown to see example.
It's because you have overflow:hidden set on .dropdown-menu, thus, if you absolutely position the pseudo elements outside of the element, they will not appear.
jsFiddle example - overflow:hidden removed - it works now.
As for why overflow:hidden didn't work while the position was static, this is another question within itself, I couldn't find any relevant specs other than:
CSS Positioned Layout Module Level 3 - 6.7. static
The box is a normal box, laid out according to the normal flow. The ‘top’, ‘right’, ‘bottom’, and ‘left’ properties do not apply.
I would guess that it is because the element isn't positioned, thus there would be no overflow.
Because you have the :before and :after pseudo-elements outside the actual element via a negative margin-top, overflow: hidden hides them.
Remove that and change to position: absolute and you're good.
http://jsfiddle.net/4epZV/2/
I've got a problem with a CSS tooltip over an image. Using it on text works fine, however when I use an image instead of text, it seems to be having issues, the issues are a bit hard to explain so I'll just give you a link:
http://zorps.dk/css-tooltips/tooltip.html
CSS code:
.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
html code:
<p> <a class="tooltip" href="#"> <img src="icon_question.png" /> <span class="classic">The tooltip text goes here!</span></a></p>
Anyone know what the issue is?
Thanks!
Note: the code is taken from: http://sixrevisions.com/css/css-only-tooltips/
It's the code within the .tooltip:hover img class - If you remove it, it works well:
http://jsfiddle.net/RyRRM/
it's probably because the event is triggered by the tooltip's non-text-node parent. When you hover over the image, it detects a mouseout event for the parent. You could try making the image a css background and setting the width of the element instead of embedding the <img>
Your markup could then be
<a class="tooltip image" href="#"><span class="classic">The tooltip text goes here!</span></a>
and your css would be
.tooltip.image {
width: 12px;
height: 14px;
background-image: url("./icon_question.png");
display: block;
background-repeat: no-repeat;
}