[Feat]: Directive based approach to overlay-trigger

### Code of conduct

- [X] I agree to follow this project's code of conduct.

### Impacted component(s)

overlay-trigger, tooltip

### Description of the requested feature

We should explore creating a directive for creating behavior similar to `overlay-trigger` but using a directive to support lazy rendering of the overlay content. This should have significant improvement to element count and initial render time as it will eliminate a large number of unnecessary DOM nodes, only rendering them on demand.

Additionally we could extend the `trigger` directive to have a special case for `tooltip` for easy of use.

### Mockups or screenshots

Example of a trigger directive in use:
```html

This is the content.

`)}
>
Trigger

```

Similarly tooltip could be used like this:
```html

Hover me

```

### Implementation notes or ideas

_No response_

Start by reading the existing overlay-trigger and tooltip components, then locate the trigger directive entry point. Define the directive API from the examples and verify how lazy overlay rendering should behave. Done means a directive-based overlay trigger reduces initial DOM work and supports the proposed tooltip shorthand, with tests covering both behaviors.

Written by the indexing model from the issue text.