Tooltip pseudo-éléments CSS style queries

• container
• @container
• style queries

Votre navigateur ne supporte pas cette démonstration

Sur Chrome 110+, tapez dans la barre d'adresse : chrome://flags. Puis cherchez Experimental Web Platform features et passez la valeur à enabled.

<div class=conteneur-infobulle>

<div class="infobulle" style="--arrow-position: start start;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac lorem tortor. Etiam eros mi, ornare ut vehicula vitae, interdum quis lorem. Duis dapibus magna at nunc blandit, vitae aliquet nunc convallis.</p>
</div>

<div class="infobulle" style="--arrow-position: end start;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac lorem tortor. Etiam eros mi, ornare ut vehicula vitae, interdum quis lorem. Duis dapibus magna at nunc blandit, vitae aliquet nunc convallis.</p>
</div>

<div class="infobulle" style="--arrow-position: start end;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac lorem tortor. Etiam eros mi, ornare ut vehicula vitae, interdum quis lorem. Duis dapibus magna at nunc blandit, vitae aliquet nunc convallis.</p>
</div>

<div class="infobulle" style="--arrow-position: end end;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac lorem tortor. Etiam eros mi, ornare ut vehicula vitae, interdum quis lorem. Duis dapibus magna at nunc blandit, vitae aliquet nunc convallis.</p>
</div>

	
</div>

*,
*::before,
*::after{

box-sizing: border-box

}

.infobulle {


container: infobulle;
border: medium solid #6753ea;
border-radius: 0.5em;


position:relative;
padding:1rem;



}

.infobulle::after {
position:absolute;
content: "";
border: 1rem solid transparent;

}
	
	
	
@container infobulle style(--arrow-position:start start) or style(--arrow-position: end start){
		
.infobulle::after {

border-block-end-color: inherit;
inset-block-end: 100%;

  }
	}	
	

@container infobulle style(--arrow-position: start start) or style(--arrow-position: end start) {
  .infobulle::after {
    border-block-end-color: inherit;
    inset-block-end: 100%;
  }
}

@container infobulle style(--arrow-position: start end) or style(--arrow-position: end end) {
  .infobulle::after {
    border-block-start-color: inherit;
    inset-block-start: 100%;
  }
}

@container infobulle style(--arrow-position: start start) or style(--arrow-position: start end) {
  .infobulle::after {
    inset-inline-start: 1rem;
  }
}

@container infobulle style(--arrow-position: end start) or style(--arrow-position: end end) {
  .infobulle::after {
      inset-inline-end: 1rem;
  }
}