Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create custom tooltip from element instead of HTML string #4869

Closed
Radiergummi opened this issue Dec 13, 2024 · 1 comment
Closed

Create custom tooltip from element instead of HTML string #4869

Radiergummi opened this issue Dec 13, 2024 · 1 comment
Labels
feature-request New feature or request

Comments

@Radiergummi
Copy link

Summary

Allow to provide an element instance from the custom tooltip callback in addition to just an HTML string. This would make it a lot easier to integrate with other libraries and frontend stacks.

API Changes

Really just this:

-   tooltipEl.innerHTML = fn({
+   const customTooltip = fn({
      ctx: this.ctx,
      series: w.globals.series,
      seriesIndex: i,
      dataPointIndex: j,
      y1,
      y2,
      w,
    })
+
+   if (typeof customTooltip === 'string') {
+     tooltipEl.innerHTML = customTooltip
+   } else {
+     tooltipEl.appendChild(customTooltip)
+   }

src/modules/tooltip/Labels.js, Lines 527–535

Intended Use Case

This allows the custom tooltip callback to not only return an HTML string, but also an HTML element instance, which solves a slew of issues and user questions, and allows more advanced integration, such as using a prop in React, or a slot in a Vue component, to render a tooltip.

The API change doesn't introduce any backwards incompatibilities.

@Radiergummi Radiergummi added the feature-request New feature or request label Dec 13, 2024
@junedchhipa
Copy link
Contributor

Great suggestion, will implement this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature-request New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants