mouseenter with condition in angular

Issue

I have a button in angular:

<button type="button" id="bulkInputButton" 
                        (click)="toggleBulkInput()"
                        #bulkInputButton>Show
                        Bulk Input</button>

I want to show different tooltip based on some condition. Basically I want to incorporate this jquery code in the button tag itself:

$("#InputForm button#bulkInputButton").mouseenter(function(e) {
            //TODO
            if($("#inputTextArea").css("display")=="none") {
                toolTip(this,"<font color='#444444'>Note:  This is not a replacement for Bulk Upload</font><br><br>On click of this button, it will display text area where user can manually enter data or copy data from excel sheet or from any editor and paste it in bulk input text area.","Bulk Input");
            } else {
                toolTip(this,"Click to hide bulk input text area.","Bulk Input");
            }
        });

How can I do this? Thank you!

Solution

You can do with the help of jquery in angular

Your typescript code should be look like.,

toggleBulkInput(){

// get id of elemeneRef
// make your dynamic logic
// call enableToolTip function

}
enableToolTip(id, validationMsg): void {
    let $control;
    $control = $(id);
    $control.attr('data-original-title', validationMsg);
    $control.tooltip('show');
}

Inside you html code you can call action method

<button type="button" id="bulkInputButton" 
    (click)="toggleBulkInput()"
    #bulkInputButton>Show
    Bulk Input</button>

By this way you can implement dynamic tooltips in angular application

Answered By - Ajay Patel