Can ECharts in Mobile App(React Native) support custom tooltips with images, colored text, and styles?

[KaustubhDTawate]

Version

Link to Minimal Reproduction

Steps to Reproduce

Current Behavior

Expected Behavior

Additionally, I have attached a demo image for reference.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[MatthiasMert]

You can just pass html to the tooltip formatter function: Example

[KaustubhDTawate]

I have tried same code inside tooltip formatter, but it returned the content as it is in string. Complete HTML code is getting rendered here.

[MatthiasMert]

It would be helpful if you provided an example link. As you can see it is working in the one I provided.

[KaustubhDTawate]

The code from the provided example link works on the web, but when used in a mobile app, the code inside the formatter function (HTML rendering) appears to be unsupported. Any alternative approaches for adapting this code for mobile use?

[KaustubhDTawate]

I attempted rich text rendering for tooltip formatting, but it doesn't appear to be functioning. I've included a link for a demo to reproduce the issue.Also I have attached demo link of html rendering on android.

Reproducible Snack Demo with rich text: link

Reproducible Snack Demo with html : link

[ghost]

I am facing this issue too, how can i show Image in tooltip ?

const option = {
      xAxis: {
        type: 'category',
        name: 'Mileage (KM)',
        data: allMileage.map(mileage => `${mileage / 1000}K`), // Convert mileage to K units for KM
      },
      yAxis: {
        type: 'value',
        name: 'Price (AED)',
        axisLabel: {
          formatter: '{value}K',
        },
      },
      tooltip: {
        trigger: 'item',
        triggerOn: 'click',
        renderMode: 'richText',
        formatter: function (params) {
          console.log('params===', JSON.stringify(params))
          if (params.seriesName === 'Other cars' && params.data?.ad_image) {
            return ` {image| }  <div>{value| Price: ${params.value}K}</div> `;
          }
        },
        // textStyle: {
        rich: {
          image: {
            height: 100, // Set image height
            width: 100,  // Set image width
            align: 'center',
            backgroundColor: {
              image: 'https://gratisography.com/wp-content/uploads/2024/03/gratisography-vr-glasses-800x525.jpg',  // Dynamically set the image URL
            },
          },
          value: {
            // fontSize: 14,
            // color: '#333',
            // align: 'center',
          },
        },
        // },
      },
      series: updatedSeries,
    };

[XHL-study]

暂时性的解决方案？ https://docs.qq.com/doc/p/4b05780aefa6438832994bba7a6a3c21a4456515 @KaustubhDTawate @AleeFarook

[ythomop]

Are there any news on this?