Adding tooltip to part of text

Questions
1

Hi,

is there a way to add a tooltip to a separate word or phrase of a text?

Like on wikipedia.

2 Likes
2

** Edit: I’ve just found this plugin which is free and offers more possibilities: https://zeroqode.com/plugin/air-tooltip-1617981518362x877549542582502700 **

Hi, I don’t know if that’s still an issue for you but for me it is now.

For the moment I use HTML element and I put some HTML/CSS to make it work as you can see here:
tooltip-1

The problem is that if the tooltip extends beyond the HTML element, then it’s cropped… and for design reasons I don’t want to enlarge the element.

3

Here is my HTML element:

2d9c02dd16163563b84314e75511d9f2
2d9c02dd16163563b84314e75511d9f21920Ă—1201 132 KB

And my CSS is on the page element:

83b90f0a1192bca178f46548db5ba2d5
83b90f0a1192bca178f46548db5ba2d5688Ă—1738 120 KB

4

In case someone needs the code:

HTML

<div class="main">
<div class="sub-main">
Le web compte des milliards de sites. Le job des moteurs de recherches, c'est d'<div class='tooltip-ctxt'>indexer<div class='tooltiptext-ctxt'>Processus de créer une liste organisée de données pour rendre leur recherche plus rapide et plus efficace</div></div> ces pages afin de nous proposer les résultats les plus appropriés selon notre requête.
</div>
</div>

CSS

<style>
.main {
width: 100%;
font-size: 16px;
font-family: Verdana, sans-serif;
line-height: 1.6rem;
}

.sub-main {
margin: auto;
max-width: 512px;
min-width: 320px;
background-color: white;
padding-top: 12px;
padding-right: 32px;
padding-bottom: 32px;
padding-left: 32px;
text-align: justify;
}

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

.tooltip-ctxt .tooltiptext-ctxt {
visibility: hidden;
  width: 20rem;
  background-color: grey;
  color: #000000;
text-align: justify;
 border-radius: 5px;
  padding: 15px;
  position: absolute;
  z-index: 10;
  /*     top: 150%;
    left: 50%; */
  margin-left: 0px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.tooltip-ctxt:hover .tooltiptext-ctxt {
  visibility: visible;
}
</style>
5

If you want to do it onclick rather than hover, a nocode solution is possible. Check the following:

1 Like