fix: tooltip showing when data-tip or tooltip-content is empty. closes: #3819

[sulimanbenhalim]

Problem

Fixes #3819

When a tooltip has an empty data-tip attribute or empty tooltip-content, it still shows a small artifact on hover. This looks like a UI bug.

Fix

I added CSS rules to hide the tooltip when:

• data-tip attribute is missing
• data-tip attribute is empty
• tooltip-content is empty
• tooltip-content only has empty children

Now empty tooltips don't show up at all, which is what users would expect.

Testing

I tested this with examples from the issue:

• Tooltip with empty data-tip=""
• Tooltip with empty tooltip-content

Before: Empty tooltips showed a strange artifact
After: Empty tooltips stay completely hidden

[saadeghi]

Hey 👋
Thanks for the PR.
Can you apply these changes please?

• use nesting to avoid duplicate selectors when possible
• do not use !important

[sulimanbenhalim]

Hey @saadeghi I updated the code using nesting as requested

this covers:

• Elements with no data-tip attribute
• Elements with empty data-tip=""
• Elements without tooltip-content div

Note: This does not cover cases with empty tooltip-content divs like <div class="tooltip-content"><div></div></div>.
That's why the initial solution covered all 4 cases

[saadeghi]

This does not cover cases with empty tooltip-content divs like <div class="tooltip-content"></div>

That's ok.
Since developers can decide when to render that div.
Also, :empty selector may not work all the time, especially when HTML is being rendered by frameworks and may include spaces inside the div, in that case it won't be counted as :empty

[sulimanbenhalim]

That's ok. Since developers can decide when to render that div.

You are right I think I just overthought the solution by focusing too much on special cases.

Also, :empty selector may not work all the time, especially when HTML is being rendered by frameworks and may include spaces inside the div, in that case it won't be counted as :empty

I tested with whitespace in the div and :empty still catches it correctly, so now it is working as intended you can double check, peace!