[Bug] The tooltip is incorrectly styled and shows up off screen when used in a Lit web compoment

[mrakgr]

Version

5.5.1

Link to Minimal Reproduction

https://stackblitz.com/edit/vitejs-vite-6qtah3?file=src%2Fmy-element.ts

Steps to Reproduce

Just hover over one of the bars after the web container boots up. All the libraries have been installed already.

You'll see that the tooltip is way too large and gets displayed off screen.

Current Behavior

This is with lines 3-56 commented in and 58-87 commented out. It runs an Echart inside a Lit component.

Expected Behavior

This is with lines 58-87 commented in and 3-56 commented out. It runs an Echart on a top level component.

Environment

- OS: Win 11
- Browser: Edge
- Framework: Lit

Any additional comments?

No response

[plainheart]

The CSS div tag selector is too generic, which causes the tooltip element to inherit the height 100%. To solve this, you can use a class selector.

static styles = css`
    .chart-container {
        height: 100%;
        width: 100%;
    }
`;

render() {
    // return `Hello.`
    return html`<div class="chart-container" ${ref(this.inputRef)}></div>`;
}

[mrakgr]

Yeah, this works. Thank you. Yesterday I noticed that changing the background color of the div also changes the background color of the tooltip, but I didn't put 2 and 2 together. Here is how ECharts can be embedded into a Lit element.

@customElement('training-chart')
class Training_Chart extends LitElement {
    static styles = css`
        :host {
            display: block;
            height: 100%;
            width: 100%;
        }
    `

    chart?: echarts.ECharts;

    render() {
        return html`<slot></slot>`; // Will put the chart which is in the light DOM into the shadow root.
    }

    protected firstUpdated(_changedProperties: PropertyValues): void {
        // Create the echarts instance
        this.chart = echarts.init(this);

        // Draw the chart
        this.chart.setOption({
            title: {
                text: 'ECharts Getting Started Example'
            },
            tooltip: {},
            xAxis: {
                data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks']
            },
            yAxis: {},
            series: [
                {
                    name: 'sales',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        });

        // Without this the chart sizing wouldn't work properly.
        const chart_container_resize_observer = new ResizeObserver(() => this.chart?.resize());
        chart_container_resize_observer.observe(this)
    }
}