corbinrobb opened a new pull request #17386: URL: https://github.com/apache/superset/pull/17386
### SUMMARY **Simple:** Removed the tooltip hover for tables that are not truncated Changed tooltip popup to be centered over the table name **Detailed:** This was done by adding a reference to the StyledSpan which is the element that had the styling to truncate when the table name text overflows. Then when the component mounts, we check if the element is overflowing and if so remove the tooltip trigger that shows the tooltip pop up. We did that by passing an empty array to the ToolTip trigger property instead of ['hover']. Doing this makes it so the tooltip never triggers and therefore never shows up. I changed the tooltip to show up over the center of the name because it looked a little weird to have it placed on the left when the table name was so long. I might be the only one who feels that way so please let me know if anybody disagrees and I will change it back. ### BEFORE  ### AFTER  ### TESTING INSTRUCTIONS Open Superset and select the SqlEditor option under SQL Lab at the top of the screen On the left side of the screen select some schema and add some tables with the table schema dropdown If you know where to find some tables with long enough names that it causes the name to truncate then open up some of those and then hover your mouse over the table names and observe. If you are like me and you do not know where to find super long table names you can add a little bit of code at the file located here `superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.jsx` Then we hop on down to line 213 and we can copy-paste this little map method in between `this.props.tables` and `.map` `.map((table, i) => { if (i % 2 == 0) return table; return { ...table, name: table.name + 'this_is_a_really_really_really_really_long_name', }; }) ` All this does is appends a really long string to the end of every other table name. You should remove this after visually testing. Should go from this: <img width="443" alt="Screen Shot 2021-11-09 at 4 11 54 PM" src="https://user-images.githubusercontent.com/31329271/141020643-df6553e1-f20b-42ed-939d-c18c9fba7159.png";> To This: <img width="626" alt="Screen Shot 2021-11-09 at 4 14 23 PM" src="https://user-images.githubusercontent.com/31329271/141020586-7279d298-e302-4172-94bd-ab1ce85a34ee.png";> Then save and refresh the page and now every other table name should be really long. Finally, you can observe the lack of tooltip on the short names and bear witness to the tooltip popup on the long ones. ### ADDITIONAL INFORMATION <!--- Check any relevant boxes with "x" --> <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue --> - [ ] Has associated issue: - [ ] Required feature flags: - [X] Changes UI - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351)) - [ ] Migration is atomic, supports rollback & is backwards-compatible - [ ] Confirm DB migration upgrade and downgrade tested - [ ] Runtime estimates and downtime expectations provided - [ ] Introduces new feature or API - [ ] Removes existing feature or API -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
![https://user-images.githubusercontent.com/31329271/141020643-df6553e1-f20b-42ed-939d-c18c9fba7159.png"](https://user-images.githubusercontent.com/31329271/141020643-df6553e1-f20b-42ed-939d-c18c9fba7159.png"){kind=link}
![https://user-images.githubusercontent.com/31329271/141020586-7279d298-e302-4172-94bd-ab1ce85a34ee.png"](https://user-images.githubusercontent.com/31329271/141020586-7279d298-e302-4172-94bd-ab1ce85a34ee.png"){kind=link}