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="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

Maybe it would be better to set this up on CodePen so that we can play around with it. It’s a drag to have to rebuild the whole thing.

1 Like

Hi I understand your point but this is code with sql request and i never use the CodePen. Anyway i found that i need to change the order witch i append the object in the svg that the toopltip is added as a last object to be in front. Thnaks

1 Like

Glad you found a solution. :+1:

Still, the problem is seen in the browser output, so it’s still best to show that when asking a question. :slight_smile:

2 Likes

You defined a polyline but gave it no points to draw.

    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 + ")")

You defined a rect, but didnt give it a fill:

So which of these was supposed to draw your background?

As far as your text appearing behind the graph lines… you draw the graph lines after creating the tooltip, so natural order will say the lines are on top. You would have to reinsert the element later in the SVG for it to be on top (or… create a group element to hold the lines, at the appropriate time, and then you can create the tooltip on top of it.)

2 Likes

@ralphm Thanks, but i am not sure to understand how this can work. Because if the sql request can’t be proceed, there is no svg draw and then how the problem can be seen…

Hi thanks for your time, yes i found the solution just by drawing the tooltip at the end. I didn’t post all the code to didn’t overload readers with it.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.