Cześć,

Zrobiłem tooltip, ale działa tylko dla pierwszego elementu.
Co robię źle?

[HTML] pobierz, plaintext 
<style>
.divID {
	position: relative;
}
label {
	display: block;
	z-index: 0;
	padding-left: 110px;
}
span {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.css_tooltip {
	position: absolute;
	left: 150px;
	top: 0;
}
</style>
 
<div class="pojemnik">
	<div class="divID" id="id_diva_11">
		<label>
			<input type="radio" data-id="11">
			<span id="span_11">kolor biały</span>
		</label>
	</div>
	<div class="divID" id="id_diva_22">
		<label>
			<input type="radio" data-id="22">
			<span id="span_22">kolor żółty</span>
		</label>
	</div>
	<div class="divID" id="id_diva_33">
		<label>
			<input type="radio" data-id="33">
			<span id="span_33">kolor niebieski</span>
		</label>
	</div>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
 
// ustawiam pojemnik
const zmienna_pojemnik = document.querySelector('.pojemnik');
const zmienna_div_otaczajacy = document.querySelector(".divID");
const najechany = zmienna_div_otaczajacy;
 
zmienna_div_otaczajacy.addEventListener( "mouseover", (event) => {
 
    event.target.style.color = "red";
 
	zmienna_kolor = najechany.querySelector("span").innerHTML;
 
	// tworze nowy div
	const zmienna_tooltip = document.createElement("div");
	let counter = 0;
	zmienna_tooltip.classList.add("css_tooltip");
	zmienna_tooltip.style.background = 'yellow';
	zmienna_tooltip.style.color = "black";
	zmienna_tooltip.innerText = zmienna_kolor;
 
	// dodaje na koniec
	const div = najechany;
	div.appendChild(zmienna_tooltip);
 
});
 
zmienna_div_otaczajacy.addEventListener( "mouseout",  (event) => {
        event.target.style.color = "";
		const zmienna_do_usuniecia = document.querySelector(".css_tooltip");
		zmienna_do_usuniecia.remove();
    },
    false
);
[HTML] pobierz, plaintext 

Z góry dziękuję za pomoc

Zdarzenia dodajesz wyłącznie do jednego elementu.
Zapoznaj się z dokumentacją:
https://developer.mozilla.org/en-US/docs/We...t/querySelector
https://developer.mozilla.org/en-US/docs/We...uerySelectorAll

Dzięki za odpowiedź, zmodyfikowałem kod:

[PHP] pobierz, plaintext 
const zmienna_pojemnik = document.querySelectorAll(".pojemnik .divID");
 
for (let zmienna_najechany of zmienna_pojemnik) {
		zmienna_najechany.addEventListener( "mouseover", (event) => {
			zmienna_najechany.style.background = 'red';
			zmienna_kolor = zmienna_najechany.querySelector("span").innerHTML;
			// tworze nowy div
			const zmienna_tooltip = document.createElement("div");
			zmienna_tooltip.classList.add("css_tooltip");
			zmienna_tooltip.style.background = 'yellow';
			zmienna_tooltip.style.color = "black";
			zmienna_tooltip.innerText = zmienna_kolor;
			// dodaje na koniec
			zmienna_najechany.appendChild(zmienna_tooltip);
		});
 
		zmienna_najechany.addEventListener( "mouseout",  (event) => {
				zmienna_najechany.style.background = '';
				event.target.style.color = "";
				const zmienna_do_usuniecia = document.querySelector(".css_tooltip");
				zmienna_do_usuniecia.remove();
		    },
		    false
		);
}
 
[PHP] pobierz, plaintext 

Trzecia edycja, ale się udało ;-)

Moze można to jakoś lepiej zrobić?

Można, używając zdarzeń delegowanych.
Podpinasz wtedy obsługę zdarzenia do jednego elementu (nadrzędnego dla wszystkich, do których obecnie dodajesz) i tam sprawdzasz na jakim potomnym elemencie zaszło zdarzenie, jeśli to element, który oczekujesz, to obsługujesz zdarzenie.
https://www.google.com/search?q=delegated+events+js