Tool Tip background/foreground

Community Help
1

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

Capture d’écran 27-06-2023 18.56.30
Capture d’écran 27-06-2023 18.56.301034×647 71.1 KB

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="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
         <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
		 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
		 <script type="text/javascript" src="Graphique WORKING JSON.js"></script>
 		
		
		
	</div>

const svg = d3.select("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
    tooltip.append("circle")
        .attr("fill", "#CCE5F6")
        .attr("r", 10);

    // Le cercle intérieur bleu foncé
    tooltip.append("circle")
        .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("opacity","0.9")
        .style("stroke-width","1.5")
		.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
    text.append("tspan")
        .attr("dx", "-5")
		.style("font-weight", "bold")
        .attr("id", "tooltip-date");

    return tooltip;
}
var tooltip = addTooltip();	

d3.select('#tooltip-date')	
	.append('tspan')
	.style("font-weight", "bold")
	.text(A[a])
	.style("font-size", "1.1em")
	.attr('dx', 5)
	.attr('dy', '-0.5')
	//.style("display","inline");
	//.attr("x", x)//Placement x,y en absolue
	//.attr("y", y)
	;}
} 

lines.selectAll("circle")
    .data(function(d) {return d.values})
    .enter()
    .append("circle")
    .attr("cx", function(d) { return xScale(d.date); })
	.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")
    	
	.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height)
	.style("display","inline");
	//.style("opacity", 1);
    //.on("mouseover", function(event) { 
        //tooltip.style("display", null);
    //})

d3.selectAll(".Points") 
	//.style("fill", "blue")
	.attr("class","point")
	.style("opacity", 0)
	//.tooltip.style(opacity, 1)
	
    .on("mouseout", function(event) {
		d3.select(this)
		.style("opacity", 0)
		
    })

	.on('mouseover', function(e, d) {	 
		d3.select(this)
			
			
			.on("mousemove", (event, d) => logMeasurement(event, d))
		//d3.select(tooltip).tooltip.style("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

2

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
3

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

4

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