This question already has answers here:
How to set width of a inline element? [duplicate]
(4 answers)
How can I make a div not larger than its contents?
(43 answers)
Closed 3 years ago.
The code below shows a tooltip when hovering over links. For some reason, I can't limit the width of the link inside of the div, so the hover effect happens at any point along the width of the parent div, which isn't what I want. I want the hover effect to be limited to the width of the link's text.
.show {
position: relative;
}
.show a {
max-width: 20%;
}
.show .tooltip {
/*visiblity: hidden; */
display: none;
position: absolute;
top: 0;
left:5%;
margin-top: -30px; /* approx adjustment for arrow */
margin-left: 25px; /* approx adjustment for arrow */
}
.show a:hover + .tooltip,
.show a:focus + .tooltip {
cursor: pointer;
display: block;
/*visibility: visible; */
width: 75%;
line-height: 20px;
padding: 8px;
font-size: 14px;
text-align: center;
z-index: 999;
color: rgb(113, 157, 171);
background: rgb(255, 255, 255);
border: 4px solid rgb(255, 255, 255);
border-radius: 5px;
text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
box-shadow: #333 -4px 4px 16px 2px;
-webkit-transition: opacity 100ms ease-in;
-o-transition: opacity 100ms ease-in;
-moz-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
pointer-events: none;
}
.show .tooltip:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent #FFFFFF transparent transparent;
top: 22px;
left: -23px;
}
a {
max-width: 20%;
max-width: 20vw;
}
<div class="lev2">
<div class="show">
<h3>Link</h3>
<div class="tooltip">
<h2>h2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
Edit: Switching the a or h3 element to inline block changes the dimensions of the div, giving an unwanted margin and/or padding. Setting margin/padding of all elements involved to 0 doesn't resolve this.
Before:
After:
Related
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
When hovering over a side-info-panel (.popup-hover-section), I want the info-img to hide(.popup-hover-div p), and at the same time show the text in .show-span.
<section class="popup-hover-section">
<div class="popup-hover-div"><p></p><span class="show-span">Hidden text, but only until I am hovered over, and the whole section is shown! And my brother paragraph is hidden! :)</span></div>
</section>
.popup-hover-section {
height: 30%;
width: 65px;
position: absolute;
right: 0%;
top: 30%;
background-color: #111;
color: #eee;
border-radius: 40px 0 0 40px;
transition: width 1s;
transition-property: border-radius, width;
box-shadow: 7px 7px 3px 0px rgba(0,0,0,0.75);
z-index: 20;
}
.popup-hover-div p {
padding: 32px 32px 32px 32px;
display: flex;
align-self: center;
background: url(images/information.png) no-repeat;
background-size: 100%;
opacity: 0.5;
}
.show-span {
/*I want to show the text inside this one, and when I do, the p-img should not show anymore*/
}
.popup-hover-div p:hover {
opacity: 1;
}
.popup-hover-section:hover {
background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
transition-duration: 1.3s;
border-radius: 0 0 0 0;
transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
width: 400px;
}
```
The trick is to catch the hover over the container (.popup-hover-section) and then continue the selector from there to style the elements within.
.popup-hover-div:hover .show-span{ //styles }
.popup-hover-div:hover p img{ //styles }
I trust you can tweak it from here, but if you need further assistance give a shout.
.popup-hover-section {
height: 30%;
width: 65%;
position: absolute;
right: 1%;
top: 30%;
background-color: #111;
color: #eee;
border-radius: 40px 0 0 40px;
transition: width 1s;
transition-property: border-radius, width;
box-shadow: 7px 7px 3px 0px rgba(0, 0, 0, 0.75);
z-index: 20;
}
.popup-hover-div p {
padding-left: 35px;
}
.show-span {
/*I want to show the text inside this one, and when I do, the p-img should not show anymore*/
color: transparent;
}
.popup-hover-div:hover .show-span{
color: lightblue;
}
.popup-hover-div:hover p img{
opacity: 0;
}
p, span{
position:absolute;
top:0;
left:0;
z-index: 1;
}
span{
top:30px;
left: 30px;
z-index: 2;
}
<section class="popup-hover-section">
<div class="popup-hover-div">
<p><img src="https://placekitten.com/380/100" /></p>
<span class="show-span">Hidden text, but only until I am hovered over, and the whole section is shown! And my brother paragraph is hidden! :)</span></div>
</section>
Hellooo
.show-span {
opacity: 0;
}
.popup-hover-section:hover .show-span {
/*I want to show the text inside this one, and when I do, the p-img should not show anymore*/
opacity: 1;
transition-delay: 1.3s;
}
I think this is the one you are looking for. Please let me know if this works.
Hi the tooltip in this sniped closes when trying to hover on the arrows of the scroll. With the mouse scroll it works fine but i need it to work with mousehover.
Got any suggestions?
Thank you in advance
.wrapper{
position:relative;
}
.tooltip {
transform: none;
margin: 50px;
}
.tooltip:hover > .tooltip-text, .tooltip:hover > .wrapper {
pointer-events: auto;
opacity: 1.0;
}
.tooltip > .tooltip-text, .tooltip >.wrapper {
display: block;
position: absolute;
z-index: 6000;
overflow: visible;
padding: 5px 8px;
margin-top: 10px;
line-height: 16px;
border-radius: 4px;
text-align: left;
color: #fff;
background: #000;
pointer-events: none;
opacity: 0.0;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/* Arrow */
.tooltip > .tooltip-text:before, .tooltip > .wrapper:before {
display: inline;
top: -5px;
content: "";
position: absolute;
border: solid;
border-color: rgba(0, 0, 0, 1) transparent;
border-width: 0 .5em .5em .5em;
z-index: 6000;
left: 20px;
}
/* Invisible area so you can hover over tooltip */
.tooltip > .tooltip-text:after, .tooltip > .wrapper:after {
top: -20px;
content: " ";
display: block;
height: 20px;
position: absolute;
width: 60px;
left: 20px;
}
.wrapper > .tooltip-text {
overflow-y: auto;
max-height: 100px;
display: block;
}
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>Hello there<br/>Hello there<br/>Hello there<br/>Hello there<br/>Hello there<br/>abc<br/>def<br/><br/>def<br/><br/>def<br/><br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>
based on my try-error research, I got a solution for webkit based on applying styles to "force" the browser to handle the scrollbar as another page element:
.tooltip.tooltip-scroll ::-webkit-scrollbar {
background-color: #F1F1F1;
}
.tooltip.tooltip-scroll ::-webkit-scrollbar-thumb {
background-color: #C1C1C1;
border: 1px solid #F1F1F1;
}
/* optional */
.tooltip.tooltip-scroll ::-webkit-scrollbar-button {
background-color: #F1F1F1;
}
(More examples on how to style the scrollbar #CSS-Tricks.)
Also, here goes an extra help.
Change style .tooltip for this:
.tooltip {
transform: none;
padding: 10px;
}
The padding allows the element that triggers the tooltip to do not lose the :hover state when moving the mouse pointer from the element to the tooltip. Since the padding area is still considered part of the element.
Note for Stack Overflow community: please, feel free to provide extra information on how this works.
Just hover on 'a headline' in the snippet below and you will see how elements are moving. Why?
There's no margin .. And they're only moving when I add border to the inline-block element. Try to add more border width in section.twelve a like:
section.twelve a {
border-bottom: 10px solid #FFFAFF;
}
But if you remove the border everything's fine.. Why is this behavior ? and is it only for border?
I just want to add any styles to the element without effecting the others.
section{
position: relative;
height: 300px;
padding: 15px 80px;
z-index: 1;
}
section h1{
font-size:3em;
font-weight: 100;
line-height: 1.3;
}
section a {
position: relative;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease-in-out;
vertical-align: bottom;
}
section.twelve {
background: #121A5A;
color: #FFFAFF;
}
section.twelve a {
color:#D8315B;
font-weight: 700;
overflow: hidden;
padding: 0px 5px;
transition all 0.2s ease;
border-bottom: 5px solid #FFFAFF;
}
.twelve a:before{
content: "";
top:0; left: 0;
position: absolute;
width:100%; height: 100%;
background: #FFFAFF;
z-index: -1;
transition: all 0.2s ease;
transform: translateX(100%);
}
.twelve a:hover::before {
transform: translateX(-95%);
background: #D8315B;
}
.twelve a:hover{
color: #FFFAFF;
transform: translateX(5px);
border-bottom: 1px solid #FFFAFF;
}
<section class="twelve">
<h1>Write a headline that makes people do kind of a double take whenthey read it.</h1>
</section>
When you add, or change the width, of a border, that changes the size of the element. Hence, by adding the border on hover, the box grows to occupy more space, which naturally shifts the position of surrounding text / elements.
One method to resolve this issue is to always have the border present, so the size of the box is fixed. When the border shouldn't be visible, it's transparent.
Here's an example:
section {
position: relative;
height: 300px;
padding: 15px 80px;
z-index: 1;
}
section h1 {
font-size: 3em;
font-weight: 100;
line-height: 1.3;
}
section a {
position: relative;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease-in-out;
vertical-align: bottom;
}
section.twelve {
background: #121A5A;
color: #FFFAFF;
}
section.twelve a {
color: #D8315B;
font-weight: 700;
overflow: hidden;
padding: 0px 5px;
transition all 0.2s ease;
border-bottom: 5px solid transparent; /* ADJUSTMENT */
}
.twelve a:before {
content: "";
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background: #FFFAFF;
z-index: -1;
transition: all 0.2s ease;
transform: translateX(100%);
}
.twelve a:hover::before {
transform: translateX(-95%);
background: #D8315B;
}
.twelve a:hover {
color: #FFFAFF;
transform: translateX(5px);
border-bottom: 5px solid white; /* ADJUSED */
}
<section class="twelve">
<h1>Write a headline that makes people do kind of a double take whenthey read it.</h1>
</section>
Yes, on hover you are changing element's border, so, element's total height also changes
I've created div element, and I also added a border-radius attribute to make the div more aesthetically pleasing. I also added a -webkit-transition: opacity .25s ease attribute to the div to create a transition to a dark overlay when the user hovers over the div. Then, I run into a problem which can be explained by these images.
Cursor outside the div element:
Moving the cursor inside the div element:
The cursor is fully inside the div element:
So, I guess this is a problem with the transition and it's caused by the rounded border of the image. It's kind of annoying and I'd like to remove it but I don't know how to. I've attached the code here:
Note: .memX (where X is a number) refers to each div element. There are like 10 .mem elements.
mem1, .mem2, .mem3, .mem4, .mem5, .mem6, .mem7, .mem8, .mem9, .mem10 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
overflow: hidden;
}
.overlay {
background: rgba(0,0,0,.4);
text-align: center;
height: 100px;
width: 100%;
padding: 45px 0px 66px 0px;
opacity: 0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
.insidetext {
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
font-weight: lighter;
color: rgba(255,255,255,.85);
font-size: 1.5em;
margin-top: 35px;
}
.mem1:hover .overlay, .mem2:hover .overlay, .mem3:hover .overlay, .mem4:hover .overlay, .mem5:hover .overlay, .mem6:hover .overlay, .mem7:hover .overlay, .mem8:hover .overlay, .mem9:hover .overlay {
border-radius: 10px;
opacity: 1;
}
.mem1 {
background-image: url(members/giles.png);
}
This seems to be a problem in general. You can see this particular problem in action on this CodePen: http://codepen.io/ianfarb/pen/ikeAf
Try using this..
body {
background: #e7e7e7;
}
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background: url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
background-size: cover;
border-radius: 5px;
overflow: hidden;
position: relative;
}
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
/*padding: 45px 0 66px 0;*/
display: table;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 96px;
display: table-cell;
vertical-align: middle;
}
http://codepen.io/anon/pen/VLBqvE
Hmm I'm confused as to why you've got so many mem classes. Class names can be reused, ID selectors cannot. So why have .mem1 and so on when you could simply have .mem?
Anyway, to fix your problem all you need to do is add border-radius:5px; to #overlay and that should give you your desired effect.
I your example you have two div one is parent (box) and another is chilled(overlay) and you apply border to parent and your hover effect is on chilled so when you hover it will apply transition on chilled. and chilled has no border-radius: 5px; so apply border-radius: 5px; to your chilled id also. so i think its an overflow issue
But you can try this soluttion:
solution is remove delay from transition then it works because of delay it will give you problem.
See this example for removed delay from transition :http://jsfiddle.net/9phk87x8/ i think it will work for you.
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity ease;
-moz-transition: opacity ease;
}
There are plenty of JavaScript-based libraries that show tooltips when you hover your mouse over a certain area of a web page. Some are rather plain, some allow the tooltip to display HTML content styled with CSS.
But is there a way to show a styled tooltip without using JavaScript? If you just use the title attribute, tags are not processed (e.g. foo<br />bar doesn't produce a line break). I'm looking for a solution that allows one to display styled HTML content without using any JavaScript.
I have made a little example using css
.hover {
position: relative;
top: 50px;
left: 50px;
}
.tooltip {
/* hide and position tooltip */
top: -10px;
background-color: black;
color: white;
border-radius: 5px;
opacity: 0;
position: absolute;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.hover:hover .tooltip {
/* display tooltip on hover */
opacity: 1;
}
<div class="hover">hover
<div class="tooltip">asdadasd
</div>
</div>
FIDDLE
http://jsfiddle.net/8gC3D/471/
Using the title attribute:
Link
Similar to koningdavid's, but works on display:none and block, and adds additional styling.
div.tooltip {
position: relative;
/* DO NOT include below two lines, as they were added so that the text that
is hovered over is offset from top of page*/
top: 10em;
left: 10em;
/* if want hover over icon instead of text based, uncomment below */
/* background-image: url("../images/info_tooltip.svg");
/!* width and height of svg *!/
width: 16px;
height: 16px;*/
}
/* hide tooltip */
div.tooltip span {
display: none;
}
/* show and style tooltip */
div.tooltip:hover span {
/* show tooltip */
display: block;
/* position relative to container div.tooltip */
position: absolute;
bottom: 1em;
/* prettify */
padding: 0.5em;
color: #000000;
background: #ebf4fb;
border: 0.1em solid #b7ddf2;
/* round the corners */
border-radius: 0.5em;
/* prevent too wide tooltip */
max-width: 10em;
}
<div class="tooltip">
hover_over_me
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci. </span>
</div>
This one is very interesting,
HTML and CSS only
.help-tip {
position: absolute;
top: 18px;
left: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before {
content: '?';
font-weight: bold;
color: #fff;
}
.help-tip:hover span {
display: block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip span {
display: none;
text-align: left;
background-color: #1E2021;
padding: 5px;
width: 200px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
left: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}
.help-tip span:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #1E2021;
left: 10px;
top: -12px;
}
.help-tip span:after {
width: 100%;
height: 40px;
content: '';
position: absolute;
top: -40px;
left: 0;
}
<span class="help-tip">
<span > This is the inline help tip! </span>
</span>
Pure CSS:
.app-tooltip {
position: relative;
}
.app-tooltip:before {
content: attr(data-title);
background-color: rgba(97, 97, 97, 0.9);
color: #fff;
font-size: 12px;
padding: 10px;
position: absolute;
bottom: -50px;
opacity: 0;
transition: all 0.4s ease;
font-weight: 500;
z-index: 2;
}
.app-tooltip:after {
content: '';
position: absolute;
opacity: 0;
left: 5px;
bottom: -16px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent rgba(97, 97, 97, 0.9) transparent;
transition: all 0.4s ease;
}
.app-tooltip:hover:after,
.app-tooltip:hover:before {
opacity: 1;
}
<div href="#" class="app-tooltip" data-title="Your message here"> Test here</div>
Another similar way to do it with CSS:
#img { }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;}
#hoverme:hover {
background-color:green;
position:absolute ;
left:300px;
top:100px;
width:40%;
height:20%;
}
<p id="hoverme"><img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"></img><span id="thistext">LOCATZ!!!!</span></p>
Try the Js Fiddle
Here are some links about transitions and other ways to do it:
http://www.w3schools.com/css3/css3_transitions.asp
http://dev.opera.com/articles/view/css3-show-and-hide/
You can use the title attribute, e.g. if you want to have a Tooltip over a text, just make:
<span title="This is a Tooltip">This is a text</span>
This is my solution for this:
https://gist.github.com/BryanMoslo/808f7acb1dafcd049a1aebbeef8c2755
The element recibes a "tooltip-title" attribute with the tooltip text and it is displayed with CSS on hover, I prefer this solution because I don't have to include the tooltip text as a HTML element!
#HTML
<button class="tooltip" tooltip-title="Save">Hover over me</button>
#CSS
body{
padding: 50px;
}
.tooltip {
position: relative;
}
.tooltip:before {
content: attr(tooltip-title);
min-width: 54px;
background-color: #999999;
color: #fff;
font-size: 12px;
border-radius: 4px;
padding: 9px 0;
position: absolute;
top: -42px;
left: 50%;
margin-left: -27px;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:after {
content: "";
position: absolute;
top: -9px;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #999999 transparent transparent;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover:before,
.tooltip:hover:after{
visibility: visible;
opacity: 1;
}