Tooltip not rendering as expected.

[tones-griff]

Please provide the environment you discovered this bug in.

Hi there,

I am trying out the tooltip bit its not working as expected. Not sure why. I dont have tailwind installed, I am more interested in using this pretty cool project as a ui library so want to add my own styles. I dont think that is the issue as its the overlay that sets the position. How do I position the tooltip correctly.

I like the shadcn approach of decoupling the design.

Which area/package is the issue in?

tooltip

Description

I have the situation as below.

The component is like this

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router'; 
import { HlmTooltipComponent, HlmTooltipTriggerDirective } from '@spartan-ng/ui-tooltip-helm';
import { BrnTooltipContentDirective } from '@spartan-ng/ui-tooltip-brain';
@Component({
  selector: 'workspace-app-shell',
  standalone: true,
  imports: [
    HlmTooltipComponent,
    HlmTooltipTriggerDirective,
    BrnTooltipContentDirective,
    CommonModule, RouterModule],
  templateUrl: './app-shell.component.html',
  styleUrl: './app-shell.component.scss',
})
export class StationSizingAppShellComponent {
  alert(){
    alert('hello');
  }
}

The html is like this.

    <button hlmTooltipTrigger aria-describedby="Hello world">Test</button>
    <span *brnTooltipContent class="flex items-center">
      Add to library
    </span>
  </hlm-tooltip>

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [X] No

[goetzrobin]

Hey there! What does your css file look like? You might have to add the cdk overlay css for it to work 😵

[goetzrobin]

This would need to be added to the styles.css file:

@import '@angular/cdk/overlay-prebuilt.css';

[tones-griff]

That did the trick, thank you.