Positionner tooltip avec la fonction CSS attr()

Tout d'abord, un petit rappel avec une démonstration en utilisant l'attribut data-. La démonstration suivante (plus bas sur cette page) vous montre comment positionner votre infobulle de manière très simple en ayant recours à la fonction "élargie" attr().

<a href="" data-infobulle="Infobulle placée à gauche" data-position="gauche">
Lien hypertexte
</a>   
<a href="" data-infobulle="Infobulle placée à droite" data-position="droite">
Lien hypertexte
</a>
<a href="" data-infobulle="Infobulle placée en haut" data-position="haut">
Lien hypertexte
</a> 
<a href="" data-infobulle="Infobulle placée en bas" data-position="bas">
Lien hypertexte
</a> 

*,
*::before,
*::after{box-sizing: border-box}

a[data-infobulle]{
	
	margin: 2rem 0;
	position: relative;
	
	}
    
	
a[data-position]:before,
	
a[data-position]:after{
	 
	transform: translate3d(0,10px,0);
	transition: transform .4s,opacity .4s;
	position: absolute;
	visibility: hidden;
	opacity: 0
		
	}
	
a[data-position]:before {
	
content: attr(data-infobulle);
background-color: hsl(0,0%,0%);
color: #fff;
font-size: .875rem;
padding: 5px;
white-space: nowrap;
text-decoration: none;

	}
    
a[data-position]:after {
	
width: 0;
height: 0;
border: 6px solid transparent;
content: ''
	
	}
	

	
a[data-position]:hover:before,

a[data-position]:hover:after{
	
transform: initial;
visibility: visible;
opacity: 1
	
	}

	
/* gauche */
a[data-infobulle][data-position="gauche"]:before {

top: 0;
right: calc(100% + 12px);

	
	}
    
a[data-infobulle][data-position="gauche"]:after {
	
border-left-color: inherit;
border-right: none;
top: calc(50% - 3px);
right: calc(100% + 6px);


}
	
/* droite */
a[data-infobulle][data-position="droite"]:before {
	
top: 0;
left: calc(100% + 12px);

}
   
  
a[data-infobulle][data-position="droite"]:after {
	
border-right-color: inherit;
border-left: none;
top: calc(50% - 3px);
left: calc(100% + 6px);

}

/* haut */
a[data-infobulle][data-position="haut"]:before {
	
bottom: calc(100% + 10px);
left: 0;

	} 
	
a[data-infobulle][data-position="haut"]:after {
	
border-top-color: inherit;
border-bottom: none;
bottom: calc(100% + 4px);
left: 10px


}

/* bas */
a[data-infobulle][data-position="bas"]:before{
	
top: calc(100% + 10px);
left: 0;


 }
   
a[data-infobulle][data-position="bas"]:after{
	
border-bottom-color: inherit;
border-top: none;
top: calc(100% + 4px);
left: 10px;

}   

Votre navigateur ne supporte pas cette démonstration

Démonstration expérimentale. Si la démonstration ne fonctionne pas, activez la fonctionnalité : #enable-experimental-web-platform-features via le drapeau chrome://flags.

Changement de nom pour l'attribut interesttarget en interestfor ainsi que les propriétés interest-interest-show-delay en interest-show-delay et interest-interest-hide-delay en interest-hide-delay.

<a interestfor="lien-1" href="">Lien</a>

<span pos="1" id="lien-1" popover=hint>Votre texte ici</span>

<a interestfor="lien-2" href="">Lien</a>

<span pos="2" id="lien-2" popover=hint>Votre texte ici</span>	

<a interestfor="lien-3" href="">Lien</a>

<span pos="3" id="lien-3" popover=hint>Votre texte ici</span>

<a interestfor="lien-4" href="">Lien</a>

<span pos="4" id="lien-4" popover=hint>Votre texte ici</span> 

*,*::before,*::after {
  box-sizing: border-box;
}
  a{margin:1lh 0}
	
span:popover-open{display:grid;}
	
[popover] {
position:unset;
overflow:unset;
font-size:1rem;
border-radius:.125lh;
border: 0;
margin: 0;
padding:.25lh;
--marge:.5lh;
opacity:calc(1 - var(--pop));
--place-self:attr(pos type(<number>));/*pour changer la fleche de sens*/
position-area:  var(--pos-area); 	
background-color:#000;
color:white
}
	
		
		
		
span::after {

position:absolute;
content: "";
place-self: var(--place-self);
rotate:var(--rotate);
--b: .5lh; 
--h: .25lh;
border-image: fill 0//var(--h) conic-gradient(#000 0 0);
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,calc(50% + var(--b)/2) 100%,50% calc(100% + var(--h)),calc(50% - var(--b)/2) 100%);

	}
	
	
[pos="1"]	{--place-self:start center;--pos-area:bottom;--rotate:180deg;margin-top:var(--marge);}/*haut*/
[pos="2"]	{--place-self:center end;--pos-area:left span-top;--rotate:-90deg;margin-right:var(--marge)}/*droite*/	
[pos="3"]	{--place-self:end center;--pos-area:top;margin-bottom:var(--marge)}/*bas*/
[pos="4"]	{--place-self:center start;--pos-area:right span-bottom;--rotate:90deg;margin-left:var(--marge)}/*gauche*/	

	
	
@starting-style {
  [popover] {
   --pop: 1;
  }
}

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition:  opacity .25s }
	}
	
[interestfor] {
    interest-show-delay: .1s;
    interest-hide-delay: .1s;
  }