javascript - not - tooltip bootstrap css

Styling d3''s tooltip

Question

Implemento un tooltip sobre círculos colocados a través de d3 en un leafletmap como este:

var tooltip = d3.select("body")
    .append("div")
    .attr("id", "mytooltip")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");



feature.on("mouseover",function(d) { 
    d3.select(this)
    .transition()
    .ease("elastic")
    .duration(500)
    .attr(''r'', function (d){ 
        return (d.properties.xy * 5)
        .style("stroke", "black")
        d3.select("#mytooltip")
            .style("visibility", "visible")
            .text(d.properties.xy1 + " " + d.properties.xy2)
    });

feature.on("mousemove", function() {
    return tooltip.style("top", (d3.event.pageY-10)+"px")
    .style("left",(d3.event.pageX+10)+"px");

    });

feature.on("mouseout",function(d) { 
    d3.select(this)
    .transition()
    .ease("elastic")
    .duration(500)
    .attr(''r'', function (d){ 
            return (d.properties.xy);
        })
        .style("stroke", "none")
        d3.select("#mytooltip")
            .style("visibility", "hidden")
    });

Donde mi característica es esta:

var feature = g.selectAll("circle")
      .data(myData.features)
      .enter()
      //...

Me pregunto cómo puedo diseñar la información sobre herramientas que aparece. ¿Hay alguna manera de darle un fondo, escribir algo en negrita, cursiva, diferentes colores, etc.?

Answer 1

Puede diseñar la información sobre herramientas con CSS. Puede hacer eso en un archivo .css separado, en una etiqueta <style> , o con d3 de la misma manera que le da visibilidad a la información sobre herramientas. Algo así como .style("background", "rgba(179, 107, 0, 0.5)")

Answer 2

Esto es lo que me gusta hacer. Primero, configuro el estilo CSS para la información sobre herramientas, usando un div con una clase llamada "tooltip":

    div.tooltip {   
        position: /*whatever*/;         
        text-align: /*whatever*/;           
        white-space: /*whatever*/;                  
        padding: /*whatever*/;              
        font-size: /*whatever*/;        
        background: /*whatever*/;   
        border: /*whatever*/;   
        border-radius: /*whatever*/;            
        pointer-events: /*whatever*/;
        etc...          
    }

Luego establezco un tooltip var (aquí, #svgId es el Id del elemento donde anexas tu svg, no muy diferente de seleccionar "cuerpo" como lo hiciste):

var tooltip = d3.select("#svgId").append("div") 
                .attr("class", "tooltip")               
                .style("opacity", 0);

El div tiene 0 opacidad. Entonces solo se trata de mostrar la información sobre herramientas al pasar el mouse o al mover el mouse. Me gusta mousemove:

feature.on("mousemove", function(d) {
                tooltip.html("<strong> Look, I''m bold !</strong> and now I''m 
                        not bold <br> and this is another line! and this
                        is my data:" + d.whatever)
                        .style(''top'', d3.event.pageY - 12 + ''px'')
                        .style(''left'', d3.event.pageX + 25 + ''px'')
                        .style("opacity", 1);
            });

Puede usar etiquetas HTML para darle un estilo al texto dentro de la información sobre herramientas, por lo que es negrita, cursiva, etc. Y, finalmente, hacemos desaparecer la información sobre herramientas en mouseout (como lo hizo):

feature.on("mouseout", function(d) {
                tooltip.style("opacity", 0);
            });