open/close tooltip controller

[0x524c]

This PR is very useful to help with form validation. It allows having a condition of not opening it if the value of data-tip is false. Please see this example I created to demonstrate its use.

https://svelte.dev/repl/79a08e408d9e464aad574b46fa9e1feb?version=3.55.0

[saadeghi]

Thank you for the PR.
I think having the false value for a data attribute is not a good idea (actually having the word false as a string in the HTML). So what do you think about conditionally rendering the data-tip (Svelte syntax: data-tip={error || null}) and then having this CSS to hide .tooltips that have not data-tip:

.tooltip:not([data-tip]):hover:before,
.tooltip:not([data-tip]):hover:after {
  visibility: hidden;
  opacity: 0;
}

https://svelte.dev/repl/9f8ceaff8bf041068027373441972e1c?version=3.55.0

[0x524c]

Thank you for the PR. I think having the false value for a data attribute is not a good idea (actually having the word false as a string in the HTML). So what do you think about conditionally rendering the data-tip (Svelte syntax: data-tip={error || null}) and then having this CSS to hide .tooltips that have not data-tip:

.tooltip:not([data-tip]):hover:before,
.tooltip:not([data-tip]):hover:after {
  visibility: hidden;
  opacity: 0;
}

https://svelte.dev/repl/9f8ceaff8bf041068027373441972e1c?version=3.55.0

Great, that works too 😁 It's just that in my complete code in typescript, the error control variable has the type string | boolean.

I'll make a new commit with your suggestion, thanks 👍

[0x524c]

Thank you for the PR. I think having the false value for a data attribute is not a good idea (actually having the word false as a string in the HTML). So what do you think about conditionally rendering the data-tip (Svelte syntax: data-tip={error || null}) and then having this CSS to hide .tooltips that have not data-tip:

.tooltip:not([data-tip]):hover:before,
.tooltip:not([data-tip]):hover:after {
  visibility: hidden;
  opacity: 0;
}

https://svelte.dev/repl/9f8ceaff8bf041068027373441972e1c?version=3.55.0

Hey @saadeghi

I better understood what caused the false value to become "false" in my PR. It was the prettier I have in vscode, with an autosave option.

What I understood was the following: "false" in the context of CSS is a quoted boolean. "'false'" in the CSS context is a string.

At first glance we seem to think it's a string/word, but CSS treats it as a quoted boolean.

The Prettier adds quotes around the values. So I decided to check that he was right and that it complies with the CSS specification and how the value is handled. I created some variations around boolean values. If you can take a look, please: https://svelte.dev/repl/8823dbfd36ed44e4a91aecb92ad9a178?version=3.55.0

With my original proposal we can use the Svelte syntax like this: (Svelte syntax: data-tip={error})

Rather than: (Svelte syntax: data-tip={error || null})

What do you think?

[0x524c]

Thank you for the PR. I think having the false value for a data attribute is not a good idea (actually having the word false as a string in the HTML). So what do you think about conditionally rendering the data-tip (Svelte syntax: data-tip={error || null}) and then having this CSS to hide .tooltips that have not data-tip:

.tooltip:not([data-tip]):hover:before,
.tooltip:not([data-tip]):hover:after {
  visibility: hidden;
  opacity: 0;
}

https://svelte.dev/repl/9f8ceaff8bf041068027373441972e1c?version=3.55.0

Hey @saadeghi,

I was in doubt about which style was the best, but I realized some problems with my original proposal. I'm ready to make a new commit with your suggestion.

[saadeghi]

Thank you