Positioning

By default, the Tooltip appears above its anchor element.

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;
      }
  `]
})
class AppComponent {}

In this article