mouseenter with condition in angular-CodePudding

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!

CodePudding user response：

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

CodePudding user response：

In angular you should "re-thinking" using variables.

I don't know about your tooltip, so, Imagine you has a typical .css

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

And a variable "toogle"

Some like

<button (click)="toogle = !toogle">toogle</button>
<div >
  Hover over me
  <span *ngIf="toogle" ><b>Toogle</b> is true</span>
  <span *ngIf="!toogle" ><b>Toogle</b> is false</span>
</div>

Makes the "trick", see that all you need is a variable. This variables makes that show one or another tooltip

The stackblitz

NOTE: You should avoid use jquery together Angular