Position

The position object defines various attributes of the Tooltip position, including the element it is positioned in relation to, and how the position is adjusted within the defined container.

Lets position the Tooltips (stems) left center corner at the right center of the target element.

  • html
  • <div class="img" id="sample">
        <a target="_blank" href="image/taj.png">
            <img src="http://js.syncfusion.com/demos/web/images/tooltip/template-05.png" alt="Delphi">
        </a>
        <div class="desc">Delphi Succinctly</div>
    </div>
    
    // Creates the Tooltip
    <script>
    /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module TooltipComponent {
        
        $(function () {
    
            var sample1 = new ej.Tooltip($("#sample"),{
            content: "Learn the fundamentals of Delphi to build a variety of solutions for many devices and platforms.",
            position : {
                stem : {horizontal :"left", vertical : "center"},
                target :{horizontal: "right", vertical: "center"}
                }
        });
     }); 
    }
    </script>

    Apply the following styles to show the Tooltip.

  • html
  • <style>
        div.img {
            border: 1px solid #ccc;
            float: left;
            box-sizing: border-box;
            height: 200px;
            width: 146px;
        }
        div.img img{
            width: 100%;
            height: 166px;
        }
        div.desc {
            padding: 6px;
            text-align: center;
        }
    </style>

    NOTE

    By default, the Tooltips “center bottom” corner is placed at the center top of the target element.

    Containment

    Determines the HTML element in which the Tooltip is appended to e.g. its containing element and The tooltip will be restricted to move only within the specified container element.

    Let’s append our Tooltip to a custom ‘frame’ container:

  • html
  • <div class="frame">
        <div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
    </div>
    
    // Creates the Tooltip
    <script>
       var sample1 = new ej.Tooltip($("#test"),{
            content: "JavaScript is the programming language of HTML and the Web.",
            containment: ".frame"
        });
    </script>

    NOTE

    By default all Tooltips are appended to the document.body element.

    Associates

    The Tooltip will be positioned in relation to target element. Can also be set to ‘mouse’ or the window, or an absolute x/y position on the page.

    Let’s position the Tooltip in relation to the ‘a’ element inside the div element:

  • html
  • <div class="frame">
        <div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
    </div>
    
    // Creates the Tooltip
    <script>
      var sample1 = new ej.Tooltip($("#test"),{
            content: "JavaScript is the programming language of HTML and the Web."
        });
    </script>

    We can also position the Tooltip in relation to the mouse.

  • html
  • <div class="frame">
        <div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
    </div>
    
    // Creates the Tooltip
    <script>
       var sample1 = new ej.Tooltip($("#test"),{
            content: "JavaScript is the programming language of HTML and the Web.",
            associate : "mousefollow"
        });
    </script>

    Position the tooltip at the current mouse position, once enter to the target element as follows

  • html
  • <div class="frame">
        <div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
    </div>
    
    // Creates the Tooltip
    <script>
       var sample1 = new ej.Tooltip($("#test"),{
            content: "JavaScript is the programming language of HTML and the Web.",
            associate : "mouseenter"
        });
    </script>

    It also possible to place the tooltip relation to the window as follows

  • html
  • <div class="frame">
        <div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
    </div>
    
    // Creates the Tooltip
    <script>
      var sample1 = new ej.Tooltip($("#test"),{
            content: "JavaScript is the programming language of HTML and the Web.",
            associate : "window",
            position : {
                target : {horizontal : "right", vertical: "bottom"}
            }
        });
    </script>

    And last but not least, absolute positioning via X,Y co-ordinates e.g. a Tooltip at 10px from left and top of the page:

  • html
  • <div class="frame">
        <div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
    </div>
    
    // Creates the Tooltip
    <script>
      var sample1 = new ej.Tooltip($("#test"),{
            content: "JavaScript is the programming language of HTML and the Web.",
            associate : "axis",
            position : {
                target : {horizontal : 10, vertical: 10}
            }
        });
    </script>

    Collision

    When the positioned element overflows the window in some direction, move it to an alternative position.

    The following values determines the kind of positioning that takes place.

    Value
    Description
    Flip
    Flips the element to the opposite side of the target if the collision detected.
    Fit
    Shift the element away from the edge of the window.
    FlipFit(Default)
    Ensure as much of the element is visible as possible to showcase.
    None
    Does not apply any collision detection.
  • html
  • <div class="frame">
        <div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
    </div>
    
    // Creates the Tooltip
    <script>
      var sample1 = new ej.Tooltip($("#test"),{
            content: "JavaScript is the programming language of HTML and the Web.",
            collision : "fit"
        });
    </script>