How to change position of tooltip triangle vertically

Question

/* TOOLTIP */
[tool-info] {
  position: relative;
  z-index: 2;
  cursor: pointer
}

[tool-info]:after,
[tool-info]:before {
  visibility: hidden;
  opacity: 0;
  pointer-events: none
}

[tool-info]:before {
  position: absolute;
  top: 99%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -37px;
  padding: 7px;
  width: 300px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, .9);
  color: #fff;
  content: attr(tool-info);
  text-align: center;
  font-size: 14px;
  line-height: 1.2
}

[tool-info]:after {
  position: absolute;
  top: 76%;
  left: 185%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, .9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0
}

[tool-info]:hover:after,
[tool-info]:hover:before {
  visibility: visible;
  opacity: 1
}

<a href="#" tool-info="tool-info">hover me</a>

On hover the tool tip appears but the triangle is incorrectly position how to move it upside down vertically so that the pointy side of the triangle points to the text while the other side is joined to the box to look as if its a part of the tooltip.

Switch the property value for border-top and border-bottom and maybe move the arrow element up using `top: -5px;` — Maharkus, Jul 26 '19 at 12:11
Please check my **[answer](https://stackoverflow.com/a/57219823/4512005)** and let me know if it suits your needs or not. — Razvan Zamfir, Oct 07 '19 at 09:59

score 1 · Answer 1 · answered Jul 26 '19 at 12:14

To have an arrow that points to the top (when using borders), you'll have to make all the four borders the same size and transparent and only the bottom on with a color.

Here's an example :

/* TOOLTIP */
[tool-info] {
  position: relative;
  z-index: 2;
  cursor: pointer
}

[tool-info]:after,
[tool-info]:before {
  visibility: hidden;
  opacity: 0;
  pointer-events: none
}

[tool-info]:before {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  margin-bottom: 5px;
  margin-left: -37px;
  padding: 7px;
  width: 300px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, .9);
  color: #fff;
  content: attr(tool-info);
  text-align: center;
  font-size: 14px;
  line-height: 1.2
}

[tool-info]:after {
  position: absolute;
  bottom: -5px;
  /** the next two lines center the arrow horizontally with the "hover me" text **/
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 0;
  height: 0;
  border: 5px solid transparent; /** all borders are 5px and transparent **/
  border-bottom-color: hsla(0, 0%, 20%, .9); /** override the color for the bottom border **/
  content: "";
  font-size: 0;
  line-height: 0
}

[tool-info]:hover:after,
[tool-info]:hover:before {
  visibility: visible;
  opacity: 1
}

<a href="#" tool-info="tool-info">hover me</a>

score 0 · Answer 2 · answered Jul 26 '19 at 12:11

Adjust border-width accordingly:

/* TOOLTIP */
[tool-info] {
  position: relative;
  z-index: 2;
  cursor: pointer
}

[tool-info]:after,
[tool-info]:before {
  visibility: hidden;
  opacity: 0;
  pointer-events: none
}

[tool-info]:before {
  position: absolute;
  top: 99%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -37px;
  padding: 7px;
  width: 300px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, .9);
  color: #fff;
  content: attr(tool-info);
  text-align: center;
  font-size: 14px;
  line-height: 1.2
}

[tool-info]:after {
  position: absolute;
  top: 76%;
  left: 185%;
  margin-left: 5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent hsla(0, 0%, 20%, .9) transparent;
  content: " ";
  font-size: 0;
  line-height: 0
}

[tool-info]:hover:after,
[tool-info]:hover:before {
  visibility: visible;
  opacity: 1
}

<a href="#" tool-info="tool-info">hover me</a>

How to change position of tooltip triangle vertically

2 Answers2