Partially making tooltip text bold

Question

I'm trying to make the first line of text from my tool tip to be bold. The code below is what I currently have and it doesn't work.

  tooltip.html("<b>" + smartData[yearSlider][d3.select(this).attr("country")]["country"] + "</b> <br>" +
  "Total CO2 Emission excluding LULUCF" + "<br>" + 
  smartData[yearSlider][d3.select(this).attr("country")]["totalghgexlulucf"] + 
  "<br>" + "Total CO2 Emission including LULUCF" + "<br>" +
  smartData[yearSlider][d3.select(this).attr("country")]["totalghginclulucf"] +
  "<br>")
  

The screenshot below is the result of the code above (some CSS was used to style the tooltip, etc.)

Result of tooltip code

Can anyone help me with this? If you need more code to help me with this problem, I'm more than happy to share it with you: :)

Sorry for my bad English, it's not my native language. Thank you in advance!

Answer 1

Hi you can solve this by using a span with a class and style the class in your css file:

tooltip.html("<span class='tooltip-text-bold'>" + smartData[yearSlider][d3.select(this).attr("country")]["country"] + "</span> <br>" +
  "Total CO2 Emission excluding LULUCF" + "<br>" + 
  smartData[yearSlider][d3.select(this).attr("country")]["totalghgexlulucf"] + 
  "<br>" + "Total CO2 Emission including LULUCF" + "<br>" +
  smartData[yearSlider][d3.select(this).attr("country")]["totalghginclulucf"] +
  "<br>")

then you style in css using:

.tooltip-text-bold{
    font-weight: 700;
}