[Feature Request] Add tooltips to RingProgress sections

[ccollie]

Usage example, including component/hook API

No example, but consider that with these two enhancements, a RingProgress could also function as a donut chart if we ensure values add to 100

Possible implementation – describe how the feature can be implemented

As stated, add a label property and onClick to the data array, and generate a tooltip if the label property is specified. Of course we would probably want to allow some customization of the tooltip properties.

Do you want to contribute this feature and create a pull request

No response

[rtivital]

Tooltips are a great feature, I think the best way to implement this is to make the tooltip follow the mouse when the user hovers over sections, it should use react-popper for direction flip.

[wes337]

This seems simple enough to implement, but should you be able to pass tooltip props through the RingProgress component? If no, how should the tooltip be styled? All default options?

If yes, would it be used something like this?

<RingProgress
  sections={[
    { value: 40, color: 'cyan', tooltip: 'something' },
    { value: 15, color: 'orange', tooltip: 'something else' },
    { value: 15, color: 'grape', tooltip: 'the last thing' },
  ]}
  tooltipProps={
    withArrow: true,
    wrapLines: true,
    color: 'red',
    radius: 'lg',
    // ... etc
  }
/>

Or maybe the props would be specified per tooltip:

<RingProgress
  sections={[
    { value: 40,
      color: 'cyan',
      tooltip: { 
        label: 'something',
        withArrow: true,
        wrapLines: true,
        color: 'red',
        radius: 'lg',
      },
    },
  ]}
/>

[rtivital]

I think Toolip component is not suitable for this as it does not follow cursor, the best way to handle this issue will be to create new FloatingTooltip component (already in backlog) and base RingProgress section on it.

[wes337]

create new FloatingTooltip component (already in backlog)

Are there any design specs or documentation for this? I could create this component if you'd like.

[rtivital]

Example of how component should work, no design specs.

Alt.mp4

[wes337]

Alright yeah I can work with that. Seems self-explanatory