Data-placement parameter doesn't seem to work.

[Georgy Pokazeev]

I tested using the data-placement param in .scss file, but it seems like it is not working. I tried the following code:

.svooltip[data-placement='top'] {
  --svooltip-bg: white;
  border: 1px solid red;
}
.svooltip[data-placement='bottom'] {
  --svooltip-bg: black;
  border: 1px solid blue;
}

For me it seems like a bug, or do I do something wrong?

[Ian]

Where is your scss file imported from?

Because it may be an issue of scoped styles.

[Georgy Pokazeev]

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.

[Ian]

Just because you imported it in the same file, doesn't mean it'll apply to the tooltips.
If you're importing it in a script tag, then all should be fine.
But if you're importing inside a style tag, then you'll need to add the global attribute.

<!-- 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>

[Georgy Pokazeev]

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?

[Ian]

Yes, the data-placement is strictly from the placement option.

[Georgy Pokazeev]

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?