I've looked at various solutions to this and can't seem to get anything to work. I hope I'm missing something simple. What I want is for a tooltip width to use only what is needed, then wrap when a max-width is reached.
Here's my CSS:
<style>
.tooltip {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: steelblue;
color: yellow;
border: solid;
border-width: 1px;
border-radius: 50%;
text-align: center;
cursor: help;
}
.tooltip:before {
content: '?';
}
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
display: inline-block;
max-width: 300px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
z-index: 10;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
And here's my HTML:
<div class="tooltip">
<div class="tooltiptext">
I want this to wrap only after 300 pixels.
</div>
</div>
Blacklist
What happens is it always wraps to fit only the widest word, making the max-width setting meaningless. Any assistance would be appreciated.
The problem is that you're trying to cram the tooltip inside a container with 20px width. It simply doesn't have any wiggle room!
For a solution, move the .tooltiptext out of the .tooltip. The CSS can mostly stay the same.
.tooltip {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: steelblue;
color: yellow;
border: solid;
border-width: 1px;
border-radius: 50%;
text-align: center;
cursor: help;
overflow:visible;
}
.tooltip:before {
content: '?';
}
.tooltip + .tooltiptext {
visibility: hidden;
position: absolute;
display: inline-block;
max-width: 300px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
z-index: 10;
}
.tooltip:hover + .tooltiptext {
visibility: visible;
}
<div class="tooltip">
</div>
<div class="tooltiptext">
I want this to wrap only after 300 pixels.
</div>
Blacklist
You need to explicitly set a min-width as well:
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
display: inline-block;
min-width: 100px;
max-width: 300px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
z-index: 10;
}
https://jsfiddle.net/gdL458jo/
Related
how with the filter css property pop-up in this element to leave the background white?
need to leave the inner white when fillter , and I don't know how
now
need
.first{
width: 200px;
height: 50px;
border: solid;
background: white;
}
.first span{
display: none;
background: white;
}
.first:hover{
filter: brightness(55%);
}
.first span:hover{
width: 100px;
height: 25px;
border: solid;
display: block;
}
<div class="first"> <span>alert</span></div>
<div class="first"><span>alert</span></div>
you can use this style
.first{
width: 200px;
height: 50px;
border: solid;
background: white;
}
.first span{
display: none;
background: white;
}
.first:hover{
background: #0000004f;
}
.first:hover span{
width: 100px;
height: 25px;
border: solid;
display: block;
}
Whenever you use filter, all children of that element will inherit it.
To achieve what you want you need to make it a sibling. Here is an example:
HTML:
<div class="block">
<div class="block-filter"></div>
<span class="block-message">alert</span>
</div>
CSS:
.block {
position: relative;
width: 200px;
}
.block-filter {
height: 50px;
width: 100%;
border: solid;
background: white;
}
.block-message {
display: none;
background: white;
}
.block-filter:hover {
filter: brightness(55%);
}
.block-filter:hover + span {
filter: unset;
position: absolute;
top: 0;
left: 0;
border: solid;
display: block;
pointer-events: none;
background: white;
}
https://codepen.io/diego-fortes/pen/vYBJoeP
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 am currently testing some CSS in different web browsers. This all works great except in Safari 5.1.7. I am testing this fiddle . Does anyone know how I can fix this, because I would like to use it in a website.
The css is supposed to display a heading with a colored line either side.
Here is the code:
[HTML]
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>
[CSS]
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
Better use one element inside h1 and use :before and :after with left and right properties. This will work in most of the browsers including Safari.
h1 {
overflow: hidden;
font-size: 30px;
text-align: center;
}
h1 span {
display: inline-block;
vertical-align: top;
position: relative;
padding: 0 5px;
}
h1 span:before, h1 span:after {
background-color: red;
position: absolute;
margin-top: -1px;
width: 9999px;
top: 50%;
height: 1px;
content: '\a0';
left: 100%;
}
h1 span:before {
left: auto;
right: 100%;
}
.color {
background-color: #ccc;
}
<h1><span>This is my Title</span></h1>
<h1><span>Another Similar Title</span></h1>
<div class="color">
<h1><span>Just Title</span></h1>
</div>
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 want to make the following icon in CSS3 such that I can very the width and height of only ".circle" (or some other wrapper element, point is I want to adjust width and height in one place or even make it so that it automatically fits in any container regardless of width and height) without having to adjust any other CSS3 properties to make the "A" line up in the center.
What is the best way to do this? If you can recommend a better way to do the following it would be very appreciated. The issue with what I have is that changing ".circle"'s width and height to be smaller affects the positioning of the positioning of eveerything else forcing me to change .circle2's properties and .letter's properties until things line up.
CSS
.circle {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
cursor:pointer;
}
.circle2 {
width:80%;
height:80%;
border-radius: 50px;
position:relative;
top:5%;
left:5%;
border: 5px solid #FFF;
}
letter{
position:relative;
top:45%;
left:30%;
margin:auto;
cursor:pointer;
color: #fff;
font-size: 60px;
font-weight: bold;
display: inline-block;
line-height: 0px;
}
letter:before {
content: "A"
}
HTML
<div class="circle">
<div class="circle2">
<a class="letter"></a>
</div>
</div>
Have a look. The only thing that's tricky is the "A" font size. You could use a library like http://fittextjs.com/ to accomplish this fully.
http://jsfiddle.net/cSBw3/1/
Code is bellow and modified.
CSS3
.container {
width: 100px;
height: 100px;
text-align: center;
}
.circle {
width: 100%;
height: 100%;
background: blue;
cursor:pointer;
position: relative;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle:after {
content:"";
display: block;
position: absolute;
/* width: 80%; height: 80%; */
top: 10%; bottom: 10%;
left: 10%; right: 10%;
border: 5px solid #FFF;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.letter {
cursor:pointer;
display: block;
}
.letter:before {
content: "A";
display: block;
position: absolute;
bottom: 19%;
right: 19%;
font-size: 3em;
font-weight: bold;
color: #fff;
}
HTML
<div class="container">
<div class="circle">
<a class="letter"></a>
</div>
</div>