How to create custom tooltips?

[GabrielEdogawa]

Hi all,

I am new to HTML, and I tried to create custom tooltips in my portfolio description. I could easily create a plain tooltip using the following code:
<span title="My tooltip!">My text</span>

Then I was trying to add a customized tooltip by using something below:
<span class="tooltip" data-tooltip="My tooltip">My text</span>

while having the following code in /_sass/_base.scss:

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

.tooltip:after {
  content: attr(data-tooltip);
  position: absolute;
  top: -30px;
  right: 0;
  left: 0;
  display: none;
  text-align: center;
  background-color: #000;
  color: #fff;
  border-radius: 4px;
  padding: 2px;
}
.tooltip:hover:after {
  display: block;
}

When I built it in my portfolio, the rendering is an untargetable empty text without any tooltip. I thought it might be due to the data-tooltip attribute, so I hardcoded the content to some strings, but it didn't work either.

Is there any way that I can add custom tooltips to the folio? Thank you for all the help!

[george-gca]

We use bootstrap in our template (currently 4.6.2) so you might want to check their tooltips docs.

[GabrielEdogawa]

Thank you for the prompt reply! For all future readers, you could just use the following code in-line to get it to work! <span data-toggle="popover" data-placement="top" title="This is the popover content.">Hover over this text</span>.