Elément masqué par une scrollbar

Bonjour tout le monde,
J'ai un petit problème CSS que je n'arrive pas à résoudre : j'ai un tableau (scrollable car il peut être assez grand...) généré en PHP, et au survol des cellules de la colonne "Référence" je fais apparaitre une bulle avec un tas d'infos. Ca, ça fonctionne. Le problème, c'est que la fin de la bulle est cachée par la scrollbar.
J'arrive à supprimer le problème en retirant "position: relative;" sur ma classe "select__tooltip" mais ce n'est pas une solution car la bulle est décalée une fois que je scrolle...
J'ai essayé de jouer avec les z-index sans succès.
Bref, besoin d'aide!
Merci

Comportement actuel:

Comportement attendu:


Codepen: https://codepen.io/Mathieu8337/pen/abvqQML
CSS (Sass):

.table__container {
	max-width: 95%;	
	margin: rem(10) auto;
	max-height: rem(500); //La fonction rem() permet de convertir des px en rem
	overflow: auto;
}
.table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	&.fixed {
		table-layout: fixed;
	}
}
.select__tooltip { 
	position: relative;

    &:hover, &:focus {
    	color: $orange1;
    	font-weight: bold;

    	span {
    		transform:scale(1) rotate(0);
    		opacity: 1;
    	}
    }
	span {
		position:absolute; 
		z-index: 1;
		margin-top: rem(-20);
		margin-left: rem(30);
		color: #fff;
		background: $orange1;
		padding: rem(7);
		border-radius: rem(10);
		border: solid $grey3 1px;
		box-shadow: $shadow-hard;
		transform:scale(0) rotate(-12deg);
		transition:all .25s;
		opacity:0;
		text-align: left;
		font-size: 0.85rem;
		font-weight: normal;
		width: max-content;
	}	
}

Structure HTML (simplifié!) :

<div class="table__container">
	<table class="table fixed">
		<thead>
			<tr>
				<th scope="col" class="w--20">+</th>
				<th scope="col" class="w--140" data-colname="company" id="company">Fournisseur</th>
				<th scope="col" class="w--160" data-colname="ref" id="ref">Référence</th>
				<th scope="col" class="w--80" data-colname="screw_dim" id="screw_dim">ØVis x pas</th>
				<th scope="col" class="w--160" data-colname="nut_dim" id="nut_dim">Dimensions écrou</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="Checkbox" class="form__checkbox" name="saved_ref[]" id="ref_1441%1352" value="1441%1352" ></td>
				<td data-colname="company"><label for="ref_1441%1352">WORLD COMPANY</label></td>
				<td data-colname="ref" id="ref"><label for="ref_1441%1352">
					<a class="select__tooltip">
						Texte qui ouvre la bulle au survol
						<span>Tout le texte de ma bulle orange sur plusieurs lignes<br>Tout le texte de ma bulle orange sur plusieurs lignes<br>Tout le texte de ma bulle orange sur plusieurs lignes<br></span>
					</a>
				</label></td>
				<td data-colname="screw_dim"><label for="ref_1441%1352">Ø12 x 3 mm</label></td>
				<td data-colname="nut_dim"><label for="ref_1441%1352">Ø18 x Ø37 x 22 mm</label></td>
			</tr>
			<tr>
				<!-- La même structure -->
			</tr>
		</tbody>
	</table>
</div>

Modifié par Mathieu8337 (07 May 2020 - 10:46)

Bonjour,

Je pense que l'idéal serait de mettre une largeur fixe au popup. Ici il prend la taille de son contenu. Mais vu qu'il n'y a pas de retour à la ligne, et que la popup est en absolute, ça dépasse.
Mettre une taille fixe à la popup réglera le problème

Bien à vous

Bonjour Gus,
Non, j'ai déjà testé et ça ne fonctionne pas... Et sans spécifier de width (ou de min-width), la bulle est très (trop) étroite.

Et l'eau,

.select__tooltip span{
....
width:400px; //valeur arbitraire
}

Ensuite en JS, tu vérifies que le bords droit ne soit pas au delà de la fenêtre. Dans le cas échéant, tu réajustes ton left ou right (que je ne vois pas dans ton code). Idem pour top ou bottom, c'est inexistant et c'est aussi à réajuster si la tooltip ne dépasse pas.
Modifié par niuxe (07 May 2020 - 18:39)

Bonjour, merci pour vos réponses!

Niuxe : ça fonctionnerait c'est sûr, mais le contenu de ma bulle sera "écrasé" si je réduis la largeur. Et je ne peux pas déplacer la bulle sur la gauche car cela va gêner d'autres affichages

Jean-Pierre: oula j'ai merdé avec les ID! Une erreur de copier/coller que je n'avais pas vu... Merci! Par contre utiliser "position:fixed" n'est pas adapté (la bulle n'est pas à une position fixe, mais à coté de l'élément que l'on survole)

Pour le moment, j'ai supprimé le "position: relative" de ma classe select__tooltip pour que ça fonctionne, et j'ai supprimé le scroll vertical pour ne plus avoir mon souci de décalage. Mais c'est pas l'idéal car je me retrouve avec des tableaux très hauts...
Bref, si quelqu'un a une autre suggestion je suis preneur

Merci et bonne journée