position a tooltip always bottom right - html

Question

I created a simple tooltip
[tooltip]:before {
content: attr(tooltip);
position: absolute;
opacity: 0;
transition: all 0.5s ease;
}
[tooltip]:hover:before {
opacity: 1;
color: #ffffff;
background: #333333;
padding: 10px;
}
/* ################ */
/* No need for this */
/* ################ */
div {
background: cyan;
margin: 20px;
padding: 10px;
}
body {
background: white;
}
<div tooltip="Tooltip">Div with tooltip</div>
As you can see the tooltip always covers the div content. I want to put the tooltip always at the bottom right side.
I add
bottom: 0;
right: 0;
to the CSS but then the tooltip appears at the bottom of the page. How can I fix this?

Answer 1

Because you first need to set your container position as relative : absolute positioning refers to the last non-static element.
After that, you don't want to use bottom: 0 but top: 100% : using bottom will align the tooltip on the bottom, while top will place it underneath your container.
[tooltip]:before {
content: attr(tooltip);
position: absolute;
opacity: 0;
right: 0;
top: 100%;
transition: all 0.5s ease;
}
[tooltip]:hover:before {
opacity: 1;
color: #ffffff;
background: #333333;
padding: 10px;
}
[tooltip] {
position: relative;
}
/* ################ */
/* No need for this */
/* ################ */
div {
background: cyan;
margin: 20px;
padding: 10px;
}
body {
background: white;
}
<div tooltip="Tooltip">Div with tooltip</div>

Answer 2

Simply add position:relative; to the element where the tooltip should be placed in the bottom right;
[tooltip] {
position:relative;
}
[tooltip]:before {
content: attr(tooltip);
position: absolute;
opacity: 0;
transition: all 0.5s ease;
bottom:0;
right:0;
}
[tooltip]:hover:before {
opacity: 1;
color: #ffffff;
background: #333333;
padding: 10px;
}
/* ################ */
/* No need for this */
/* ################ */
div {
background: cyan;
margin: 20px;
padding: 10px;
}
body {
background: white;
}
<div tooltip="Tooltip">Div with tooltip</div>