Lemoncode TV

D3js mostrando un tooltip

Vamos a ver ahora como interactuar con eventos del DOM: queremos que cuando el usuario pase el ratón por encima de una porción, la aplicación muestre un tooltip con el nombre del mes y venta.

Manos a la obra

El tooltip lo mostraremos usando html, vamos primero a definir unos estilos:

• Lo mostraremos en posición absoluta.
• Le ponemos un color de fondo y tamaño acorde a un tooltip.

./src/styles.css

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: #f7f2cb;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

• Vamos añadir los estilos a nuestra configuración de webpack (si estás usando en tu proyecto CSS modules o CSS in JS podrías importartelo en el fichero).

./wepback.config.js

entry: {
-  app: "./index.ts",
+  app: ["./styles.css", "./index.ts"],
},

• Vamos a crear un div que de primeras estará oculto en el que aplicaremos el estilado css que hemos definido antes.

./src/index.ts

const tooltipDiv = d3
  .select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

• Y ahora en el evento mouseover vamos a mostrar el tooltip:

grupoGrafica
  .selectAll("slice")
  .data(datosArcos)
  .enter()
  .append("path")
  .attr("d", <any>constructorDePath)
  .attr("fill", function (d) {
    return color(d.data.mes);
  })
+  .on("mouseover", function (event, datum: d3.PieArcDatum<Ventas>) {
+    const ventasDatos = datum.data;
+    const coords = { x: event.pageX, y: event.pageY };
+    tooltipDiv.transition().duration(200).style("opacity", 0.9);
+    tooltipDiv
+      .html(`<span>${ventasDatos.mes}: ${ventasDatos.ventas}</span>`)
+      .style("left", `${coords.x}px`)
+      .style("top", `${coords.y - 28}px`);
+  });
  ;

• Y en el mouseout vamos a esconder el elemento (en este caso jugamos con la opacidad y añadimos una animación).

  .on("mouseover", function (event, datum: d3.PieArcDatum<Ventas>) {
    const ventasDatos = datum.data;
    const coords = { x: event.pageX, y: event.pageY };
    tooltipDiv.transition().duration(200).style("opacity", 0.9);
    tooltipDiv
      .html(`<span>${ventasDatos.mes}: ${ventasDatos.ventas}</span>`)
      .style("left", `${coords.x}px`)
      .style("top", `${coords.y - 28}px`);
  })
+  .on("mouseout", function(datum) {
+   tooltipDiv.transition()
+     .duration(500)
+     .style("opacity", 0);
+  });
  ;

Si te fijas ahora podemos ir viendo un tooltip cuando nos ponemos encima de cada porción.

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.