Trigger Bootstrap tooltip with empty value set

Question

I'm working with AngularJS and Twitter Bootstrap (TB), from Angular I'm using validation tools and from TB some goodies like tooltip. This is how the HTML is render:

<input 
    type="text" 
    id="company_taxId" 
    ng-model="company.taxId" 
    required="required" 
    class="input ng-scope ng-pristine ng-valid-maxlength ng-valid-minlength ng-valid-pattern ng-invalid ng-invalid-required" 
    style="width:485px;" 
    ng-minlength="9" 
    maxlength="9" 
    ng-maxlength="9" 
    ng-pattern="/^[\d{9}$]/" 
    placeholder="Ej: 458965879" 
    tooltip="" 
    wv-def="" 
    tooltip-trigger="focus" 
    tooltip-placement="right" 
    wv-cur="" 
    wv-err="Este valor debería ser un número válido." 
    wv-req="Este campo es requerido" 
    wv-min="Este valor debería tener exactamente 9 caracteres" 
    wv-max="Este valor debería tener exactamente 9 caracteres"
>

And this is how my directive looks at Angular side:

app.directive('validated', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            element.keyup(function(){
                parent = $('.tooltip');
                target = parent.find('.tooltip-inner'); 
                if( element.hasClass('ng-invalid-required') ){
                    target.html(attrs.wvReq);
                    attrs.wvCur = attrs.wvReq;
                    parent.addClass('error');
                }
                else if( element.hasClass('ng-invalid-email') ){
                    target.html(attrs.wvEml);   
                    attrs.wvCur = attrs.wvEml;
                    parent.addClass('error');   
                }
                else if( element.hasClass('ng-invalid-minlength') ){
                    target.html(attrs.wvMin);   
                    attrs.wvCur = attrs.wvMin;
                    parent.addClass('error');   
                }
                else if( element.hasClass('ng-invalid-maxlength') ){
                    target.html(attrs.wvMax);   
                    attrs.wvCur = attrs.wvMax;
                    parent.addClass('error');
                }
                else if( element.hasClass('ng-invalid') ){
                    target.html(attrs.wvErr);
                    attrs.wvCur = attrs.wvErr;
                    parent.addClass('error');   
                }
                else{
                    target.html(attrs.wvDef);
                    attrs.wvCur = attrs.wvDef;
                    parent.removeClass('error');    
                }
            });

            element.focus(function(){
                attrs.tooltip = attrs.wvCur;
                setTimeout(function(){
                    parent = element.next('.tooltip');  
                    target = parent.find('.tooltip-inner'); 
                    target.html( ( attrs.wvCur != "" ? attrs.wvCur : attrs.wvDef ) );
                    console.log()
                    if( attrs.wvCur != attrs.wvDef && attrs.wvCur != "" )
                        parent.addClass('error');
                },5);
            });
        }
    };
});

As you may notice tooltip is empty but I use it to trigger others messages. If tooltip is empty then the other messages aren't showed, exists any way to trigger TB tooltip with empty tooltip value?

Answer 1

I don't understand why you didn't use the angular-ui tooltip, you can set tooltip to empty and activate it, like that way

<div tooltip=" " placement right></div>

take a look at this documentation here

EDIT

There is some possibilities with angular strap too for an easiest way to solve this problem, have you try the hashcode like @SparoHawk suggest? anyway i suggest you to say to your web designer area to take a look to the angular modules around, there is lot of solution's that they can use, except that another solution could be to set the value into the tooltip binding it to an array with the value that you interest like this

<div tooltip='{{value}}'></div>

javascript

var value=["",something, something else]
var function=function(){
    if(something happens){
        $scope.value=value[0];
    }
    else if(something else happens){
        $scope.value=value[1]
    }
    else{
        $scope.value=value[2]
    }
}

var value=["",something, something else]
var function=function(){
    if(something happens){
        $scope.value=value[0];
    }
    else if(something else happens){
        $scope.value=value[1]
    }
    else{
        $scope.value=value[2]
    }
}

so that's a possiblity