How to position clickable tooltip beside specific object?

Question

I am trying to build an interactive tooltip in Divi.

It is to show references for an academic paper. So the results should look like this:

sample reference tooltip from academic site

Here is a sample page that shows the desired result in action (screen capture is taken from this site): https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7463562/

In the site shown, they have clearly been able to do this — so I know it is possible.

They seem to be using some kind of library or function prefixed with "aria-" as many of the classes they are using have that same prefix.

I am able to create the pop-up and trigger it when the user hovers over the reference number. I can also move the tooltip up and to the right by so many pixels, but I am not able to accurately position the window beside the reference number as my client has requested.

This is what I have so far:

code results so far

I tried Googling "css position one object next to another" but was unable to find much that was helpful. There was documentation on something called Aria Tooltip (which is consistent with the source code of the site referenced above) but what I found seemed to be describing a class, not how to use it.

What I would like to do is position that tooltip right beside the trigger in the above paragraph. I am presuming this will be done with a combination of Aria Tooltip and jQuery but I am at a loss for what to do next.

Any help would be appreciated!

Answer 1

Try This One :

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  color : red;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

<div>The physiological and pathophysiological effects of histamine on the body were first described in 1910 by Dale and Laidlaw, two pioneering researchers who studied the functions of this organic compound at the Wellcome Physiologicalcompound at the Wellcome Physiologicalcompound at the Wellcome Physiological Research Laboratories <div class="tooltip">[4,5,6]<span class="tooltiptext">Tooltip text</span></div>. Specifically, histamine is synthesized and stored in high concentrations in secretory granules, mainly in basophils and mast cells, and also in gastric enterochromaffin cells, lymph nodes and the thymus <div class="tooltip">[1,7]<span class="tooltiptext">Tooltip text</span></div>. </div>