Positioning

By default, the Tooltip appears above its anchor element.

Changing the Position

To change the position of the Tooltip, set its position property.

@Component({
  selector: 'my-app',
  template: `
    <div class="wrapper">
        <div kendoTooltip class="right" position="right">
            <button class="k-button" title="This tooltip is on the right">
                Right
            </button>
        </div>
        <div kendoTooltip class="left" position="left">
            <button class="k-button" title="This tooltip is on the left">
                Left
            </button>
        </div>
        <div kendoTooltip class="top" position="top">
            <button class="k-button" title="This tooltip is on the top">
                Top
            </button>
        </div>
        <div kendoTooltip class="bottom" position="bottom">
            <button class="k-button" title="This tooltip is on the bottom">
                Bottom
            </button>
        </div>
    </div>
  `,
  styles: [`
      .wrapper {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
      }
      .wrapper div {
          flex-basis: 50%;
          text-align: center;
          margin-bottom: 50px;
      }
      button {
          padding: 10px 50px;
      }
      .wrapper .top,
      .wrapper .bottom {
          margin-bottom: 0;
      }
  `]
})
export class AppComponent {}

Viewport Boundary Detection

The Tooltip enables you to set its boundary detection functionality by using the collision binding property. For more information, refer to the article on viewport boundary detection by the Kendo UI for Angular Popup.

In this article