Tool Tip background/foreground

Hello i have a following svg created with a tooltip as on the picture.

My problem is that as you can see the text is not readable when passing over the difeerent lines.
How can i force the text to be in the foreground ?
I have tried to adjust opacity but this is not working. Code is as follow :

<div id="Container" class="container">
        <div id="graphique"></div>
		<!--Chargement de jquery pour utilisation d'ajax-->
         <!--<script type="text/javascript" src=""></script>-->
         <script type="text/javascript" src=""></script>
		 <script type="text/javascript" src=""></script>
		 <script type="text/javascript" src="Graphique WORKING JSON.js"></script>
const svg ="div#Container").append("svg")
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("stroke-width", "1.8")//Peut servir a definir la largeur des courbes
	//.attr("style", "outline: thin solid red;")//Dessine un contour rouge à l'éléments SVG
	.attr("viewBox", "-"
          + adj + " -"
          + adj + " "
          //+ (width + adj *3) + " "
		  + (width + adj *4) + " "
          + (height + adj*3.6))
    .style("padding", padding)
    .style("margin", margin)
	.on("mousemove", (e) => { console.log("X",d3.pointer(event)[0] ) })
	.on("mousemove", (e) => { console.log("Y",d3.pointer(event)[1] ) })
function addTooltip() {
    // Création d'un groupe qui contiendra tout le tooltip plus le cercle de suivi
    var tooltip = svg.append("g")
        .attr("id", "tooltip")
		.attr("class", "Tip")
		.attr("transform", "translate( 100 , -10 )")//Décale le point pour qu'il soit caché.
		//.style("opacity", .9)
        //.style("display", "inline");
    // Le cercle extérieur bleu clair
        .attr("fill", "#CCE5F6")
        .attr("r", 10);

    // Le cercle intérieur bleu foncé
        .attr("fill", "#3498db")
        .attr("stroke", "#fff")
        .attr("stroke-width", "1.5px")
        .attr("r", 4);
    // Le tooltip en lui-mĂŞme avec sa pointe vers le bas

    var polyline=tooltip.append("polyline")
		.attr("id", "polyline")
		//.attr("points","0,0 -100,-151.5 -100,"+ypolyline+" -370,"+ypolyline+" -370,-196.5 -100,-196.5 -100,-161.5 0,0 ")
		//.attr("points","0,0 100,-151.5 100,"+ypolyline+" +370,"+ypolyline+" +370,-196.5 100,-196.5 100,-161.5 0,0 ")//Points originaux
        .style("fill", "#fafafa")//Couleur fond polyline
        .style("stroke","#3498db")//Couleur contour polyline
		.style("stroke", "round")  // shape the line join Ne fonctionne pas....
		//.attr("transform", "translate(0, 0)");//Positionne le ToolTip en valeur relative au point
		//.attr("transform", "translate(-124,"+ypolyline+")");
		//.attr("transform", "translate(0," + height + ")")
	// Cet élément contiendra tout notre texte
    var text = tooltip.append("text")
		.attr("id", "textes")
        .style("font-size", "13px")
        .style("font-family", "Segoe UI")
        .style("color", "#333333")
        .style("fill", "#333333")
		 //.attr("transform", "translate(-360, -174.5)");//Positionne le texte à l'intérieur du ToolTip
    // Element pour la date avec positionnement spécifique
        .attr("dx", "-5")
		.style("font-weight", "bold")
        .attr("id", "tooltip-date");

    return tooltip;
var tooltip = addTooltip();'#tooltip-date')	
	.style("font-weight", "bold")
	.style("font-size", "1.1em")
	.attr('dx', 5)
	.attr('dy', '-0.5')
	//.attr("x", x)//Placement x,y en absolue
	//.attr("y", y)

    .data(function(d) {return d.values})
    .attr("cx", function(d) { return xScale(; })
	.attr("cy", function(d) { return yScale(d.measurement); })
	.attr("class", "Points")
	.attr("r", 10)
	.attr("fill", "#3498db")
    .attr("stroke", "#fff")
    .attr("stroke-width", "1.5px")
    .attr("fill", "#CCE5F6")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height)
	//.style("opacity", 1);
    //.on("mouseover", function(event) { 
        //"display", null);

	//.style("fill", "blue")
	.style("opacity", 0)
	//, 1)
    .on("mouseout", function(event) {
		.style("opacity", 0)

	.on('mouseover', function(e, d) {
			.on("mousemove", (event, d) => logMeasurement(event, d))
		//"display", "inline")	


I know it’s a lot of code but if someone can help tu=o guide me on how i should proceed will be appreciate.Thanks

You’ll want to call addTooltip() only after you’ve added all other elements, so that the SVG group that wraps the tooltip sits on top.

1 Like

@mootari great i understood and it’s working. Thanks

Great to hear! You can mark this topic as answered by clicking the checkbox icon under the answer that solved your problem.