Viewport CORE

    
      
    

      
        Copy
      
      
    
  

    
      <div class="dropdowns">
    <div
        tuiDropdown="1"
        tuiDropdownHover
        class="t1"
    ></div>
    <div
        tuiDropdown="3"
        tuiDropdownHover
        class="t2"
    ></div>
    <div
        tuiDropdown="2"
        tuiDropdownHover
        class="t3"
    ></div>
    <div
        tuiDropdown="4"
        tuiDropdownHover
        class="t4"
    ></div>
</div>

    

      
        Copy
      
      
    
  

    
      @import '@taiga-ui/styles/utils.less';

.dropdowns {
    position: relative;
    display: block;
    block-size: 18.75rem;
    inline-size: 50%;
    resize: both;
    overflow: hidden;
    outline: 0.125rem dotted var(--tui-border-normal);

    @media @tui-tablet {
        inline-size: 100%;
    }
}

.t1,
.t2,
.t3,
.t4 {
    position: absolute;
    inline-size: 3.125rem;
    block-size: 3.125rem;
    background: var(--tui-background-accent-1);
}

.t1 {
    inset-block-start: 0.625rem;
    inset-inline-start: 0.625rem;
}

.t2 {
    inset-block-start: 0.625rem;
    inset-inline-end: 0.625rem;
}

.t3 {
    inset-inline-end: 0.625rem;
    inset-block-end: 0.625rem;
}

.t4 {
    inset-inline-start: 0.625rem;
    inset-block-end: 0.625rem;
}

.t-centered-axis-xy {
    .center-all();
}

.t-direction {
    inline-size: max-content;
    margin-block-end: 1rem;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <portal-host class="dropdowns">
    <div
        tuiDropdownHover
        class="t1"
        [tuiDropdown]="dropdown"
    ></div>
    <div
        tuiDropdownHover
        class="t2"
        [tuiDropdown]="dropdown"
    ></div>
    <div
        tuiDropdownHover
        class="t3"
        [tuiDropdown]="dropdown"
    ></div>
    <div
        tuiDropdownHover
        class="t4"
        [tuiDropdown]="dropdown"
    ></div>
</portal-host>

<ng-template #dropdown>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
        Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
    </p>
</ng-template>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-segmented class="t-direction">
    @for (direction of directions; track direction) {
        <label>
            <input
                name="radio"
                type="radio"
                [value]="direction"
                [(ngModel)]="selected"
            />
            {{ direction }}
        </label>
    }
</tui-segmented>

<portal-host class="dropdowns">
    <button
        tuiButton
        type="button"
        class="t-centered-axis-xy"
        [tuiHint]="template"
        [tuiHintDirection]="selected"
        [tuiHintManual]="hintShown"
        (click)="toggleHint()"
    >
        Hint
    </button>
</portal-host>

<ng-template #template>
    Use
    <a
        appearance="action-grayscale"
        tuiLink
        tuiTheme="dark"
        class="link"
    >
        Hint
    </a>
</ng-template>

    

      
        Copy