GitHub user dosubot[bot] added a comment to the discussion: How to apply
.echarts-tooltip[style*='visibility: hidden'] styling in embedded dashboards?
<!-- Answer -->
The global CSS rule for hiding ECharts tooltips
(`.echarts-tooltip[style*='visibility: hidden'] { display: none !important; }`)
does not automatically apply to embedded dashboards because the content is
rendered inside an iframe, which isolates its styles from the parent page.
Currently, the superset-ui embedded SDK does not provide a built-in way to
inject custom CSS directly into the embedded iframe. The dashboardUiConfig
option allows you to control some UI elements, but not arbitrary CSS injection
[reference](https://github.com/apache/superset/blob/master/superset-embedded-sdk/src/index.ts).
There are two main approaches you can consider:
**1. Injecting Custom CSS via Superset's `injectCustomCss` Function**
Superset provides an `injectCustomCss` utility that appends custom CSS to the
dashboard's `<head>`. If you have control over the Superset instance or can
customize dashboard code, you can use this function to inject your CSS rule.
This ensures your style is applied last and overrides existing styles
[reference](https://github.com/apache/superset/discussions/31456).
**2. Using a Custom `postMessage` Handler for Embedded Dashboards**
If you need to inject CSS dynamically from the embedding context, you can
implement a custom `postMessage` handler in Superset. This involves adding a
script to the embedded dashboard that listens for messages from the parent
window and applies any CSS sent in those messages. This approach requires
modifying your Superset deployment, typically by customizing
`superset_config.py` to inject the script. Here’s an example of how this can be
done [reference](https://github.com/apache/superset/issues/32357):
```javascript
<script>
(function() {
window.addEventListener('message', function(event) {
if (event.data && event.data.method === 'customCss' && event.data.args &&
event.data.args.css) {
const styleElement = document.createElement('style');
styleElement.textContent = event.data.args.css;
document.head.appendChild(styleElement);
}
}, false);
})();
</script>
```
You would then send a message from your embedding application to the iframe
with the CSS you want to inject.
**On Extending GlobalStyles.tsx for Embedding**
Currently, there is no documented hook or official method to extend
GlobalStyles.tsx support to embedded dashboards. The global styles are applied
using the `Global` component from `@emotion/react` within the main Superset
app, but these do not propagate to embedded iframes
[reference](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/containers/DashboardPage.tsx).
If you would like to see official support for injecting global styles or a
documented hook for embedding use cases, you may want to raise this as a
feature request with the Superset team.
In summary: to resolve your issue, you will need to inject the CSS into the
embedded dashboard itself, either by customizing the dashboard code with
`injectCustomCss` or by implementing a postMessage-based solution as described
above.
<!-- Dosu Comment Footer -->
*To reply, just mention my name [@dosu](https://go.dosu.dev/dosubot).*
---
<sup>How did I do?
[Good](https://app.dosu.dev/response-feedback/8f85c44c-a302-4930-8b0f-8c14c27414dd?feedback_type=great_response)
|
[Irrelevant](https://app.dosu.dev/response-feedback/8f85c44c-a302-4930-8b0f-8c14c27414dd?feedback_type=irrelevant_answer)
|
[Incorrect](https://app.dosu.dev/response-feedback/8f85c44c-a302-4930-8b0f-8c14c27414dd?feedback_type=incorrect_sources)
|
[Verbose](https://app.dosu.dev/response-feedback/8f85c44c-a302-4930-8b0f-8c14c27414dd?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/8f85c44c-a302-4930-8b0f-8c14c27414dd?feedback_type=hallucination)
| [Report
🐛](https://app.dosu.dev/response-feedback/8f85c44c-a302-4930-8b0f-8c14c27414dd?feedback_type=bug_report)
|
[Other](https://app.dosu.dev/response-feedback/8f85c44c-a302-4930-8b0f-8c14c27414dd?feedback_type=other)</sup> [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/33611)
GitHub link:
https://github.com/apache/superset/discussions/33611#discussioncomment-13300952
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
