I'm trying to overarchitect a tooltip. The goal is for the tooltip abstraction to not have any knowledge of the wide context (document). Instead, it should be placed in an element and just work.
However, I'm having difficulty achieving max-width behaviour:
Understandably so, since the content has white-space: nowrap.
However, without it, I face this problem:
Help me fix the layout so that I may get a proper max-width behaviour. Specifically, when there is no more room in the line, wrap the content in a new line.
Here's the example: https://jsbin.com/fucujak/3/edit?html,css,output
helper {
display: inline-block;
position: relative;
top: 30%;
left:30%;
padding: 10px;
background: green;
color: white;
border-radius: 300px
}
tooltip {
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
tooltip:hover tooltip-anchor {
display: block;
}
tooltip-anchor {
display: none;
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
}
tooltip-container {
display: block;
position: absolute;
}
tooltip-positioner {
display: block;
position: relative;
left: -50%;
}
tooltip-content {
display: block;
padding: 10px;
/* white-space: nowrap; */
background: blue;
color: white;
max-width: 100px;
}
<helper>
i
<tooltip>
<tooltip-anchor>
<tooltip-container>
<tooltip-positioner>
<tooltip-content>
Some long, extended tooltip content
</tooltip-content>
</tooltip-positioner>
</tooltip-container>
</tooltip-anchor>
</tooltip>
</helper>
You can simply do like below:
helper {
display: inline-block;
position: relative;
top: 30%;
left: 30%;
padding: 10px;
background: green;
color: white;
border-radius: 300px
}
tooltip {
position: absolute;
display:none;
top: 100%; /* place at bottom*/
/* center*/
left:50%;
transform:translateX(-50%);
/**/
margin-right: -200px; /* this is the trick that will make sure the content can go up to 180px (an arbitrary big value) */
max-width:180px; /* your max-width*/
padding:10px;
background:blue;
}
helper:hover tooltip {
display:block;
}
<helper>
i
<tooltip>
Some long, extended tooltip content
</tooltip>
</helper>
<helper>
i
<tooltip>
Some long
</tooltip>
</helper>
Related
I am trying to add background color beyond the container in CSS.
But the problem I am facing is: it overlaps the container and I am unable to show background before the container.
HTML code is here
<div class="container">Some content here </div>
And CSS code
.container { padding: 15px; background-color: #eee;
/* For centering the container */
margin: 0 auto; }
/* CSS for background before the container */
.container::before { content: "";
background-color: red;
width: 300%;
height: auto;
left: -100%;
top: 0;
position: absolute;
z-index: -1;
}
Please let me know what mistake I am doing.
You are missing the height on the :before so the background is not visible:
.container {
padding: 15px;
background-color: #eee;
margin: 0 auto;
margin:50px;
}
.container:before { content: "";
background-color: red;
width: 300%;
height: auto;
left: -100%;
top: 0;
position: absolute;
height:50px;
}
<div class="container">Some content here</div>
I'm trying to create a heading with lines on both sides.
For some reason it doesn't work on IE only on the left side.
http://jsfiddle.net/1qp9dvuL/
h2 {
position: relative;
overflow: hidden;
text-align: center;
}
h2:before,
h2:after {
position: absolute;
top: 44%;
overflow: hidden;
width: 50%;
height: 1px;
margin-left: 5%;
content: '\a0';
background-color: red;
}
h2:before {
margin-left: -55%;
text-align: right;
}
<h2>THE HEADING</h2>
Solution that works in Chrome/FF/IE
Here is an alternative work-around that works for content/text with varying widths.
Example Here
The reason it wasn't work in IE was because the pseudo elements weren't being positioned relative to the text. To work around that, I removed the absolute positioning from the pseudo elements, and set the display to table-cell so that they are positioned relative to the text.
Adjust the right/left positioning to control the space around the text.
.line {
display: table;
white-space: nowrap;
overflow: hidden;
text-align: center;
}
.line:before,
.line:after {
content: '';
display: table-cell;
position: relative;
top: 0.5em;
width: 45%;
height: 1px;
border-top: 1px solid #f00;
}
.line:before {
right: 5%;
}
.line:after {
left: 5%;
}
<h2 class="line">THE HEADING</h2>
<h2 class="line">THE LONGER HEADING</h2>
I recently built a slide-out menu using jQuery, but the list containing the menu items has been behaving strangely. No matter how I change the CSS, the various list elements always stay in the same place, right on top of each other. The page in question is this.
.slide-menu {
width: 30%;
left: -30%;
position: absolute;
z-index: 1;
background-color: white;
}
.dlink {
font-size: 16px;
position: absolute;
width: 30%;
display: block;
}
#slide-list{
list-style: none;
top: 0%;
margin-left: 0px;
}
.sli-list-item {
width: 30%;
}
#slide-panel {
height: 100%;
top: 0%;
}
This is the relevant CSS.
Change your .dlink class to this:
.dlink {
font-size: 16px;
position: relative;
width: 30%;
display: block;
}
position: absolute; made them line up on top of each other.
I need to layer multiple divobjects.
To look like this
Whenever I load the markup as an HTML file in the browser the top: feature isn't responding. Then, if I open firebug to check the CSS, it shows that the value is there. If I modify the value of top: then and only then do the elements with top applied to them snap to the value in the CSS file.
I am aware that an alternative is to use a negative margin-top combined with padding set in fixed units, but as margin-top is relative to the child and not the parent that isn't consistent under all circumstances. I'd rather use position:absolute inside of a position:relative container.
Here's a fiddle, for some reason the it isn't congruent with what I see on my html file. Nonetheless, it may be of some help visualizing things.
<!--here's the container-->
<div id="fale_container">
<!--here's the container for the top-layer-->
<div id="fale_textbox_0">
<div class="highlight0a" id="Fale"><h1 class="fale_heading" id="faleh1">Fale</h1></div>
<div class="highlight0a" id="que"><h1 class="fale_heading">que</h1></div>
<div class="highlight0a" id="nem"><h1 class="fale_heading">nem</h1></div>
<div class="highlight0a" id="um"><h1 class="fale_heading">um</h1></div>
</div>
<!--here's the markup in question, this needs to go behind the container cited above. this is where the problematic styles are located-->
<div id=fale_textbox_container>
<div id="fale_textbox_2">
<h1 id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
CSS
.highlight0a{
position: relative;
height: 55.7px;
width: 100%;
margin-bottom:1%;
}
.fale_heading {
position: relative;
display: block;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3em;
clear: right;
z-index: 10; }
#fale_container {
position: relative;
height: auto;
width: 100%; }
#fale, #que, #nem, #um {
z-index: 9; }
#fale:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
width: 9%;
height: 100%;
left: 13.334%;
min-width: 4em; }
#que:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 9.1%;
left: 13.334%;
min-width: 6em; }
#nem:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 10.5%;
left: 13.334%;
min-width: 4em; }
#um:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 7.3%;
left: 13.334%;
min-width: 2em; }
#fale_textbox_container, #fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
display: block;
position: relative;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: auto; }
#fale_textbox_container {
background-color: black;
z-index: 0; }
#fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
padding: 2%;
top: -42%;
z-index: 2; }
#fale_textbox_1 {
height: 100px;
background-color: white; }
#fale_textbox_2 {
height: 60px;
background-color: #7C1A1A; }
#fale_textbox_3 {
height: 80px;
background-color: #3F3C3C; }
#fale_heading_2, #fale_subheading_1, #fale_subheading_2 {
position: absolute;
z-index: 4;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 28.66858%;
color: black; }
#fale_heading_2 {
top: 10; }
#fale_subheading_1 {
font-size: 4em;
top: 10; }
#fale_subheading_2 {
top: 10; }
I'm not completely sure what you are trying to accomplish.
Maybe you mean the following:
#fale_textbox_container {
background-color: black;
z-index: 0;
position: absolute; // Added this one
}
.highlight0a {
position: relative;
height: 55.7px;
margin-bottom:1%;
display: inline; // And this one
}
http://jsfiddle.net/xqd3x91q/3/
And next time, please please outline the code a little bit better, hard to read. And sometime in English would give most users more feeling of what you are trying to do. For me it looks like it is some sort of book cover.
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.