CODEWITHSUNDEEP
htmlcss
peterHasemann
peterHasemann

Reputation: 1580

position a tooltip always bottom right

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?

Upvotes: 0

Views: 5692

Answers (2)

Jonathan
Jonathan

Reputation: 177

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>

Upvotes: 1

user4676340
user4676340

Reputation:

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>

Upvotes: 4

Related Questions