CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Noobster
Noobster

Reputation: 1044

Jquery tooltip absolute positioning

I would like to fix the positioning of my Jquery tooltip in an absolute way. No matter where my mouse goes or what it hovers, the tooltip needs to appear at the place, as a function of a div. Say, the bottom left corner of a div. It's not so much of a tooltip as a static div. But I am not looking to convert the tooltip to a div.

Is it for example to set the tooltip so that the top left corner of the tooltip is set by a coordinate, which relates to a specific container div?

Here's a good jsfiddle if you need it.

Upvotes: 0

Views: 870

Answers (1)

Rauli Rajande
Rauli Rajande

Reputation: 2020

If you know your tooltip content when preparing html, you can use css.

Here is an example. (Needs some work on styling)

.box {
  position: relative;
  width: 200px;
  height: 50px;
  margin-bottom: 70px;
  background-color: blue;
}

.tooltip {
  display: none;
  border: 1px solid black;
  padding: 10px;
  background-color: white;
  position: absolute;
}

/* here are your coordinates */
.box_tooltip_right .tooltip {
  left: calc(100% + 5px);
  top: 0;
}

/* here are your coordinates for bottom tooltip */
.box_tooltip_bottom .tooltip {
  left: 0;
  top: calc(100% + 5px);
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.hoverbox:hover .tooltip {
  display: block;
}
<div class="box box_tooltip_bottom">
  
  <div class="hoverbox">
    <div class="tooltip">I am tooltip bottom 1</div>
    Tooltip bottom 1
  </div>

  <div class="hoverbox">
    <div class="tooltip">I am tooltip bottom 2</div>
    Tooltip bottom 2
  </div>

</div>

<div class="box hoverbox box_tooltip_right">
  <div class="tooltip">I am tooltip right</div>
  Tooltip right
</div>

Upvotes: 1

Related Questions