Before and after work, different after overflow: auto
I have a tooltip div that changed the border at the top to look like an arrow that is executed by some before and after attributes. But when I use overflow: auto on this div, this "arrow" disappears.
How it looks without overflow:auto;
:
http://jsfiddle.net/nmvh4L6g/1/
How it looks from overflow: auto;
:
http://jsfiddle.net/nmvh4L6g/2/
Sorry for my english and thanks for any help!
source to share
At the top of my head, you can use an inner div like:
<div id="tooltipNotifikace">
<div>Lorem impsum dolor sit amet</div>
</div>
And in CSS, you are using overflow in the inner div:
#tooltipNotifikace > div {
max-height: 500px;
overflow-y: auto;
}
JSFiddle: http://jsfiddle.net/nmvh4L6g/7/
source to share
You don't need to install overflow-y
in auto
. The tooltip automatically adjusts its height until it reaches the value max-height
500px
you set.
Edit:
I think today I feel generous:
/* Based on http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/ */
.tooltipWrap {
position: fixed;
right: 6px;
top: 20px;
}
#tooltipNotifikace, .arrow:after {
background: #fff;
border: 2px solid #0dbe48;
}
#tooltipNotifikace {
color: #1bc204;
text-align: center;
padding: 0px 0px 0px 0px;
width: 350px;
max-height: 300px;
overflow-y: auto;
background: #fff;
border: 2px solid #0dbe48;
z-index:1;
}
.arrow {
width: 70px;
height: 18px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
top: -16px;
}
.arrow:after {
content: " ";
position: absolute;
left: 20px;
top: 10px;
width: 25px;
height: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
z-index:2;
}
<div class="tooltipWrap"><div id="tooltipNotifikace">Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet.</div><div class="arrow"></div></div>
JSFiddle .
source to share