Panels: Native title attribute tooltip overlapping with custom tooltip for long text

### What happened? The UI currently displays both the native tooltip (from the title attribute) and a custom tooltip for long text. Since the native tooltip is not part of the DOM and always renders on top, it visually overlaps the custom tooltip, causing confusion and cannot be controlled via CSS or z-index. <img width="456" height="112" alt="Image" src="https://github.com/user-attachments/assets/0ff7f465-e6e5-4cb7-8494-6ae2a3e4e22b" /> ### What did you expect to happen? Only the custom tooltip should be displayed, avoiding overlap with the native tooltip. <img width="496" height="140" alt="Image" src="https://github.com/user-attachments/assets/c049f6c4-992f-4d99-ae3c-c37ea0be8fd0" /> **Proposed Solution:** 1. Remove the title attribute and use only a custom tooltip (e.g., data-title with CSS/JS). 2. Alternatively, dynamically disable the title attribute when showing the custom tooltip and restore it afterward. **Important Notes:** Attempting to override the native tooltip using CSS or z-index is not feasible and should not be attempted. ### Did this work before? Not sure if this worked previously ### How do we reproduce it? 1. Create panel. 2. Add large title example: `Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit, Sed Do Eiusmod Tempor Incididunt Ut Labore Et Dolore Magna Aliqua` 3. Reduce the panel size to reproduce the tooltip overlapping issue. <img width="515" height="228" alt="Image" src="https://github.com/user-attachments/assets/b45c6133-154d-4ce4-9f97-957ed4f588dd" /> ### Is the bug inside a dashboard panel? Yes in title panel: <img width="515" height="228" alt="Image" src="https://github.com/user-attachments/assets/b45c6133-154d-4ce4-9f97-957ed4f588dd" /> ### Environment (with versions)? Grafana: `V11.6.0 – 12.2.0` OS: `Any` Browser: `Any` ### Grafana platform? Docker ### Datasource(s)? _No response_