ASP.NET MVC Tooltip: Popover control with Smart Positioning

@using Syncfusion.EJ2
@section ControlsSection{

    <div class="col-lg-8 control-section">
        <!-- Tooltip element  -->
        @Html.EJS().Tooltip("Tooltip").Content("Let's go green to save the planet!!").ContentTemplate(@<div>
            <!-- Target element  -->
            @Html.EJS().Button("btn").Content("Show Tooltip").Render()
        </div>).Render()
		
		 </div>
    <div class="col-lg-4 property-section">
        <table id="property" title="Properties">
            <tbody>
                <tr>
                    <td style="width: 30%">
                        <div>Position</div>
                    </td>
                    <td style="width: 70%;padding-right: 10px">
                        <div>
                            <select id="positions" class="form-control" onchange="onChange(this)">
                                <option value="TopLeft">Top Left</option>
                                <option value="TopCenter" selected="">Top Center</option>
                                <option value="TopRight">Top Right</option>
                                <option value="BottomLeft">Bottom Left</option>
                                <option value="BottomCenter">Bottom Center</option>
                                <option value="BottomRight">Bottom Right</option>
                                <option value="LeftTop">Left Top</option>
                                <option value="LeftCenter">Left Center</option>
                                <option value="LeftBottom">Left Bottom</option>
                                <option value="RightTop">Right Top</option>
                                <option value="RightCenter">Right Center</option>
                                <option value="RightBottom">Right Bottom</option>
                            </select>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
}
<script>
    var tooltip;
    window.onload = function () {
        tooltip = document.getElementById('Tooltip').ej2_instances[0];
    }
    function onChange(args) {
        tooltip.position = args.value;
    }
</script>
<style>
    #Tooltip {
        position: absolute;
        left: calc( 50% - 60px);
        top: 45%;
    }
    #headerpanel {
        padding-top: 30px;
        padding-bottom: 20px;
        font-weight: 600;
        font-size: 15px;
    }

</style>