Develop Reference

CSS, Tooltip: Having a auto-resize background according to tooltip text

Using this codepen, I want to show the tooltip that can auto-resize. What I mean is, if there is a long text to be displayed as the tooltip message, can the tooltip box be resize to adjust the message in multiple lines? I know that ideally tooltip is supposed to be a few words at best, but still, I'm just curious to explore it.
Current:
Expected
Should I change the displayattribute? I tried changing to flex, inline, inline-flex, etc. but none worked. Even tried with width: auto but I think that will require some more logic.

body {
font-family: sans-serif;
}
[data-title] {
outline: red dotted 1px; /*optional styling*/
font-size: 30px; /*optional styling*/
position: relative;
cursor: help;
}
[data-title]:hover::before {
content: attr(data-title);
position: absolute;
top: calc(100% + 10px);
display: inline-block;
padding: 3px 6px;
border-radius: 2px;
background: #000;
color: #fff;
font-size: 12px;
font-family: sans-serif;
word-break: break-word;
max-width: 150px;
}
[data-title]:hover::after {
content: '';
position: absolute;
bottom: -10px;
left: 8px;
display: inline-block;
color: #fff;
border: 8px solid transparent;
border-bottom: 8px solid #000;
}
<h1>Styling html title tooltip</h1>
<span data-title="Here is some extra long text that should break the line">Hover me</span>
I changed bottom: -26px; to top: calc(100% + 10px);.
I removed white-space: inherit;.
I added word-break: break-word;.
I added max-width: 150px;.
Currently the width of the tooltip is limited by either max-width or the width of the span. You could add min-width but that could leave a lot of blank space if the text isn't long enough.
These changes should position the tooltip and the little arrow pointer thingy correctly so the neither overlap.

Change from no wrap to wrap
[data-title]:hover::before {white-space: wrap; }

How can I show a tooltip when a user hovers over the box shadow of an element?

I have an element that is 1x1 px, with a box shadow that is much larger.
I would like a tooltip to display whenever the user hovers, but the problem is that the tooltip only activates when the user hovers over the 1x1 px area, ignoring the huge box shadow.
The blue element (glow) in this fiddle is an example. I tried making the green element (glow2) larger just to show how the tooltip should look.
https://jsfiddle.net/fortunette/fLm3d7oz/1/
.glow {
width: 1px;
height: 1px;
background-color: blue;
border-radius: 50%;
box-shadow: 0 0 24px 19px blue;
position:absolute;
top:300px;
left:100px;
}
Other requirements are that there are an arbitrary number of these glowing elements at arbitrary positions and sizes.

Create pseudo-elements that are the same size as the entire area of your divs including the box-shadow.
The pseudo-element overlays can be transparent. Then use the :hover state for the pseudo-elements to trigger the tool tip.
Working example:
.glow {
width: 1px;
height: 1px;
background-color: blue;
border-radius: 50%;
box-shadow: 0 0 24px 19px blue;
position: relative;
margin: 2em;
}
.glow:after {
content: "";
display: block;
height: 50px;
width: 50px;
position: absolute;
top: -25px; /* needs to be half of height and width */
left: -25px; /* needs to be half of height and width */
border-radius: 50%;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.glow .tooltiptext {
display: none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0; /* Position the tooltip */
position: absolute;
z-index: 1;
}
.glow:hover:hover .tooltiptext {
display: block;
}
<div class="glow"><span class="tooltiptext">Tooltip text</span></div>

The box shadow is not part of the box html element and that is why your tooltip is not showing. I would recommend you wrap your box with in a div and use the tooltip on the outer div that also contains your box shadow.
Of course you will have to add padding to the outer div so it will fully contain the box shadow. This way when the user hover on the box shadow, they are actually hovering on top of the outer div and the tooltip will show up. You can use google chrome developing tools (ctrl+shift+i) to see how much padding you will need. Use a: hover or JqueryUI tooltip on the outer div class. Hope this helps!

How can I make dynamically created divs flush with eachother?

I have a function that creates a grid of divs that are generated and sent to a container div when the document loads (or when the user resets it). Everything seems to be about the way that I like it, except that there is a gap between each "row" of divs. I'd like it to be a perfect grid, with each square flush with each other. I've tried modifying borders, outlines, padding and the like with no success. I'm convinced there has to be a way to make this work that is less complicated than I am making it out to be. jsfiddle example: https://jsfiddle.net/psyonix/1g9p59bx/84/
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var n = 0;
var squareSize = (area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
border-radius: 5px;
margin: 0 auto;
overflow: hidden;
}
.square {
display: inline-block;
position: relative;
background-color: #C8C8C8;
outline-color: #000000;
outline-width: 1px;
outline-style: solid;
}

You just need to either remove a outline-width from .square or give it some 2px or 3px value.
.square {
display: inline-block;
position: relative;
background-color: #C8C8C8;
outline-color: #000000;
outline-width: 3px; //or 2px or just remove it as I have done in my DEMO
outline-style: solid;
}
DEMO HERE

You are using inline-block on the square elements, so the square elements will act like the words inside a paragraph, and will be laid out as in lines of a sentence. These lines will have line-height just as in normal sentences, so one way is to reset the line-height of the parent holding these square words.
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
border-radius: 5px;
margin: 0 auto;
overflow: hidden;
line-height: 0px;
}
This way you can JAM the lines as you are not exactly looking for lines as in normal sentences.
Another way is to avoid using the inline-block and using block and float to attain the same. Block display doesn't have the issue of line-height or white-spaces between elements.
.square {
display: inline-block;
position: relative;
background-color: #C8C8C8;
outline-color: #bc0000;
outline-width: 1px;
outline-style: solid;
display:block;
float:left;
}

How to add a scroll bar to my div without it blowing up my web page

I have a real simple page that has a header, footer, body, and left and right nav's.
All of them together make a nice rectangular page thats 100% of the width.
All made using div's in a css sheet.
I have 20 image thumbnails in the body and when the page is resized they push my footer out of place.
To fix this i would like to add a scrollbar to the body div.
I have already done this with overflow-y: auto;
However,
Adding the scrollbar seems to add some space to the right side of the body, forcing it to be placed underneath the left and right nav's blowing everything up. Please Help.
#headerElement {
width: 100%;
height: 50px;
border: 2px solid #000000;
background-color: #F8AA3C;
}
#bodyElement {
margin-left: 10%;
width: 80%;
color: blue;
height: 400px;
background-color: #F8883C;
border: 2px dashed #F8AA3C;
overflow-y: auto;
}
#leftNavigationElement {
float: left;
width: 10%;
height: 400px;
border: 2px dashed #FF0000;
background-color: #8F883C;
}
#rightNavigationElement {
float: right;
width: 10%;
height: 400px;
border: 2px dashed #0000FF;
background-color: #F888FC;
}
#footerElement {
clear: both;
border: 2px dashed #00FFFF;
height: 50px;
width: 100%;
}

Because the scroll bar is not inside the width of the div but still takes up space, you need to give it some space or negative margins. I would guess a width of 18 pixels for IE, and since you cannot set that in IE, that will have to be your default.
::-webkit-scrollbar { width: 18px; margin-right:-18px; }
::-moz-scrollbar { width: 18px; margin-right:-18px;}
::-o-scrollbar { width: 18px; margin-right:-18px;}

You'll need to either restructure the page so it flows better or force the scrollbar with {overflow-y: scroll} and adjust widths accordingly so the layout doesn't break.

Positioning sticked (fixed) element relatively

How can I positionate a fixed element at the left side of the div with processing resize events?
Here's example: http://jsfiddle.net/yHErk/10/
Now on my screen resolution .skicked is right at the left side of .container. But if I'll simply resize the result window, it'll change. Is there a simple way to do that thing I want?
Thank you.

Currently your .sticked div has no relative parent to hold it so it is moving according to the re-size.
Add .sticked div inside the container div.
CSS
.container {
width: 300px;
margin-left: auto;
margin-right: auto;
border: 1px solid;
background: #dedede;
padding: 10px; position:relative
}
.sticked {
position: absolute;
top: 100px;
left: -50px;
border: 1px solid;
border-radius: 5px;
padding: 10px;
background: white;
}
​DEMO