Hi,
is there a way to add a tooltip to a separate word or phrase of a text?
Like on wikipedia.
Hi,
is there a way to add a tooltip to a separate word or phrase of a text?
Like on wikipedia.
** 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:
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.
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>
If you want to do it onclick rather than hover, a nocode solution is possible. Check the following: