Question 271610 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – highcharts svg element with inline style tooltip

I want to add a tooltip to an SVG element that I created with the renderer function. The tooltip text should be partially bold. Unfortunately the following code does not work – the word is not written bold.

var circle = renderer.circle(100, 100, 50)
  .attr({
    fill: 'red',
    stroke: 'black',
    'stroke-width': 2,
    title: 'This is the partially <b>bold</b> Tooltip for the circle'
  })
  .add();

JsFiddle:
https://jsfiddle.net/martindfurrer/bm1djhpw/10/

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I tried the following code, but it doesn't work either.

    var chart = Highcharts.chart('container', {
  chart: {
    type: 'line',
    events: {
      load: function() {
        var renderer = this.renderer;
        
        // Create the circle
        var circle = renderer.circle(100, 100, 50)
          .attr({
            fill: 'red',
            stroke: 'black',
            'stroke-width': 2
          })
          .add();
        
        // Enable tooltip for the circle
        circle.on('mouseover', function() {
          this.series.update({
            tooltip: {
              formatter: function() {
                return 'this is the <b>bold</b> Tooltip for the circle';
              }
            }
          });
          this.series.tooltip.refresh(this);
        });
        circle.on('mouseout', function() {
          this.series.tooltip.hide();
        });
      }
    }
  },

    JsFiddle: https://jsfiddle.net/martindfurrer/5m3yehu1/7/


  2. 0

    The circle title is not specifically the Highcharts thing, but just svg tag, and I’m not sure if it possible to bold it
    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title ;

    When it comes to the second approach – the circle you’ve created using the renderer does not have a built-in tooltip property like data points in a series. You will need to create a custom tooltip:

    events: {
  load: function () {
    const renderer = this.renderer;
    const series = this.series[0];

    series.circle = renderer.circle(100, 100, 50)
      .attr({
        fill: 'red',
        stroke: 'black',
        'stroke-width': 2,
      })
      .add();

    series.circle.on('mouseover', function () {
      if (!series.customTooltip) {
        series.customTooltip = renderer.label(
          'This is the partially <b>bold</b> tooltip for the circle',
          series.circle.x,
          series.circle.y
        ).add();
      }
      series.customTooltip.show();
    });

    series.circle.on('mouseout', function () {
      if (series.customTooltip) {
        series.customTooltip.destroy();
        series.customTooltip = null;
      }
    });
  }
}

    Demo:
    https://jsfiddle.net/BlackLabel/hd01y3j7/

    I’m not sure about your specific requirements, but you can also consider using a point to achieve a similar outcome:

    Demo:
    https://jsfiddle.net/BlackLabel/7kma8tsb/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search