Dynamically construct tooltip from database column type and size

See more:

WebAPI

AngularJs

, +

I am working on angularjs, entity-framework and WebAPI .I want to show tool-tip for input elements dynamically. Tooltip has to be constructed on the basis of DB column type and size.I thought of fetching column information using query

select COLUMN_NAME,CHARACTER_MAXIMUM_LENGTH,DATA_TYPE from INFORMATION_SCHEMA.columns where TABLE_NAME ='Tabletest'

But this will add one extra API call for each page. Is this right way of showing tooltip. Please suggest me right approach to achieve this.

Currently I am using Directive to show tooltip like this

app.directive('tooltip', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            $(element).hover(function () {
                // on mouseenter
                $(element).tooltip('show');
            }, function () {
                // on mouseleave
                $(element).tooltip('hide');
            });
        }
    };
});

and HTMl as

<input type="text" name="Mytext" class="form-control" title="Name should be of max 60 characters" required="required" tooltip >

One more issue I am facing while I disable the buttons tooltip is not shown. for this I found the solution as in

Angular: Tooltip on disabled input - JSFiddle[^]

I wanted to use same Directive to use for all controls. how can I achieve that. Thanks in advance.