-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Data-placement parameter doesn't seem to work. #16
Comments
Where is your scss file imported from? Because it may be an issue of scoped styles. |
I am applying styles to svooltip in global scss file. I am using Svelte and for some reason styles are not being applied if I am writing scss styles in the component where I use the svooltip. The main problem that I was trying to resolve is that I want a border to be applied to the arrow of the tooltip, but setting only the border reveals that it is a square. I, of course, want that the border of arrow would point to the direction of users' cursor. |
Just because you imported it in the same file, doesn't mean it'll apply to the tooltips. <!-- src/routes/+layout.svelte -->
<script>
import 'svooltip/styles.scss';
import '../styles/tooltip.scss'; // Custom tooltip styles
</script>
<style lang="scss" global>
@use 'svooltip/styles';
.svooltip[data-placement='top'] {
border: 1px solid red;
}
</style> |
Okay, I tried it, and now I can apply styles using the same component file. I think I misunderstood the purpose of the "data-placement" parameter. I thought that svooltip automatically detects the placement of the tooltip (in my case either 'top' or 'bottom'), but it seems like it depends on the "placement" parameter which you can assign on initiation of a tooltip (or will be defaulted to 'top'). Am I right on this one? |
Yes, the |
Is it anyhow possible to pass z-index to the arrow square so the half of it would be hidden under the content container? In that case I could just apply a border to the arrow. I tried setting z-index in .svooltip, .svooltip-content and .svooltip-arrow, but that didn't work. Is there any workaround to make content container appearing on top of arrow square? |
Forgot to mention, but this was fixes ages ago. |
I tested using the data-placement param in .scss file, but it seems like it is not working. I tried the following code:
For me it seems like a bug, or do I do something wrong?
The text was updated successfully, but these errors were encountered: