Tooltip hover on selected field in angular 2

up vote
1
down vote

favorite

html code

<td >  

 <input type="text" class="form-control"  value="create.qty[i]"   (mouseenter)="toggle()" (mouseleave)="toggle()" name="qty"       [(ngModel)]="this.create.qty[i]" #qty="ngModel" (change)="onqtyadd($event.target.value,i)"  >

 <div *ngIf="show">

 <div  *ngIf="show" style="border-radius: 6px;z-index: 8;position: absolute; background-color:black;height: 15%;padding-left:10px;color:white; width: 5%;"><p>{{qtyhover[i]}}</p></div>

 </div>

</td>

I just want to show the selected field but it show hover in every field in dynamic table

enter image description here

edited Nov 21 at 11:38

לבני מלכה

7,8211523

asked Nov 21 at 11:02

goku naruto

114

can you show your toggle() function
– לבני מלכה
Nov 21 at 11:06

add a comment |

up vote
1
down vote

favorite

html code

<td >  

 <input type="text" class="form-control"  value="create.qty[i]"   (mouseenter)="toggle()" (mouseleave)="toggle()" name="qty"       [(ngModel)]="this.create.qty[i]" #qty="ngModel" (change)="onqtyadd($event.target.value,i)"  >

 <div *ngIf="show">

 <div  *ngIf="show" style="border-radius: 6px;z-index: 8;position: absolute; background-color:black;height: 15%;padding-left:10px;color:white; width: 5%;"><p>{{qtyhover[i]}}</p></div>

 </div>

</td>

I just want to show the selected field but it show hover in every field in dynamic table

enter image description here

edited Nov 21 at 11:38

לבני מלכה

7,8211523

asked Nov 21 at 11:02

goku naruto

114

can you show your toggle() function
– לבני מלכה
Nov 21 at 11:06

add a comment |

up vote
1
down vote

favorite

html code

<td >  

 <input type="text" class="form-control"  value="create.qty[i]"   (mouseenter)="toggle()" (mouseleave)="toggle()" name="qty"       [(ngModel)]="this.create.qty[i]" #qty="ngModel" (change)="onqtyadd($event.target.value,i)"  >

 <div *ngIf="show">

 <div  *ngIf="show" style="border-radius: 6px;z-index: 8;position: absolute; background-color:black;height: 15%;padding-left:10px;color:white; width: 5%;"><p>{{qtyhover[i]}}</p></div>

 </div>

</td>

I just want to show the selected field but it show hover in every field in dynamic table

enter image description here

edited Nov 21 at 11:38

לבני מלכה

7,8211523

asked Nov 21 at 11:02

goku naruto

114

html code

<td >  

 <input type="text" class="form-control"  value="create.qty[i]"   (mouseenter)="toggle()" (mouseleave)="toggle()" name="qty"       [(ngModel)]="this.create.qty[i]" #qty="ngModel" (change)="onqtyadd($event.target.value,i)"  >

 <div *ngIf="show">

 <div  *ngIf="show" style="border-radius: 6px;z-index: 8;position: absolute; background-color:black;height: 15%;padding-left:10px;color:white; width: 5%;"><p>{{qtyhover[i]}}</p></div>

 </div>

</td>

I just want to show the selected field but it show hover in every field in dynamic table

enter image description here

html css angular

edited Nov 21 at 11:38

לבני מלכה

7,8211523

asked Nov 21 at 11:02

goku naruto

114

edited Nov 21 at 11:38

לבני מלכה

7,8211523

asked Nov 21 at 11:02

goku naruto

114

edited Nov 21 at 11:38

לבני מלכה

7,8211523

edited Nov 21 at 11:38

לבני מלכה

7,8211523

edited Nov 21 at 11:38

לבני מלכה

7,8211523

asked Nov 21 at 11:02

goku naruto

114

asked Nov 21 at 11:02

goku naruto

114

asked Nov 21 at 11:02

goku naruto

114

can you show your toggle() function
– לבני מלכה
Nov 21 at 11:06

add a comment |

can you show your toggle() function
– לבני מלכה
Nov 21 at 11:06

can you show your toggle() function
– לבני מלכה
Nov 21 at 11:06

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

instead use boolean property use number like show:number

and set an index (the current) to show on mouseenter/leave and in html ask if show==index

in HTML:

(you do not have to ask twice ngIf only in wrap div)

<input type="text" class="form-control"  (mouseenter)="show=i" (mouseleave)="show=0">

<div *ngIf="show==1">

  <div>your tooltip 1 </div>

</div>

See example:https://stackblitz.com/edit/hello-angular-6-eu5ecu?file=src/app/app.component.html

edited Nov 21 at 11:30

answered Nov 21 at 11:13

לבני מלכה

7,8211523

this.show==0?index:0; when I code in code this line in component.ts I am getting error
– goku naruto
Nov 21 at 11:52

do as my example: (mouseenter)="show=i" (mouseleave)="show=0" you do not have to use function
– לבני מלכה
Nov 21 at 11:52

and *ngIf="show==1" in html
– לבני מלכה
Nov 21 at 11:53

I tried but it still shows the data only in 2nd input field
– goku naruto
Nov 21 at 12:36

I belive your i starts from 0 so use to first *ngIf="show==0" and second *ngIf="show==1" and etc.
– לבני מלכה
Nov 21 at 12:37

|
show 5 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53410701%2ftooltip-hover-on-selected-field-in-angular-2%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

instead use boolean property use number like show:number

and set an index (the current) to show on mouseenter/leave and in html ask if show==index

in HTML:

(you do not have to ask twice ngIf only in wrap div)

<input type="text" class="form-control"  (mouseenter)="show=i" (mouseleave)="show=0">

<div *ngIf="show==1">

  <div>your tooltip 1 </div>

</div>

See example:https://stackblitz.com/edit/hello-angular-6-eu5ecu?file=src/app/app.component.html

edited Nov 21 at 11:30

answered Nov 21 at 11:13

לבני מלכה

7,8211523

this.show==0?index:0; when I code in code this line in component.ts I am getting error
– goku naruto
Nov 21 at 11:52

do as my example: (mouseenter)="show=i" (mouseleave)="show=0" you do not have to use function
– לבני מלכה
Nov 21 at 11:52

and *ngIf="show==1" in html
– לבני מלכה
Nov 21 at 11:53

I tried but it still shows the data only in 2nd input field
– goku naruto
Nov 21 at 12:36

I belive your i starts from 0 so use to first *ngIf="show==0" and second *ngIf="show==1" and etc.
– לבני מלכה
Nov 21 at 12:37

|
show 5 more comments

up vote
0
down vote

instead use boolean property use number like show:number

and set an index (the current) to show on mouseenter/leave and in html ask if show==index

in HTML:

(you do not have to ask twice ngIf only in wrap div)

<input type="text" class="form-control"  (mouseenter)="show=i" (mouseleave)="show=0">

<div *ngIf="show==1">

  <div>your tooltip 1 </div>

</div>

See example:https://stackblitz.com/edit/hello-angular-6-eu5ecu?file=src/app/app.component.html

edited Nov 21 at 11:30

answered Nov 21 at 11:13

לבני מלכה

7,8211523

this.show==0?index:0; when I code in code this line in component.ts I am getting error
– goku naruto
Nov 21 at 11:52

do as my example: (mouseenter)="show=i" (mouseleave)="show=0" you do not have to use function
– לבני מלכה
Nov 21 at 11:52

and *ngIf="show==1" in html
– לבני מלכה
Nov 21 at 11:53

I tried but it still shows the data only in 2nd input field
– goku naruto
Nov 21 at 12:36

I belive your i starts from 0 so use to first *ngIf="show==0" and second *ngIf="show==1" and etc.
– לבני מלכה
Nov 21 at 12:37

|
show 5 more comments

up vote
0
down vote

instead use boolean property use number like show:number

and set an index (the current) to show on mouseenter/leave and in html ask if show==index

in HTML:

(you do not have to ask twice ngIf only in wrap div)

<input type="text" class="form-control"  (mouseenter)="show=i" (mouseleave)="show=0">

<div *ngIf="show==1">

  <div>your tooltip 1 </div>

</div>

See example:https://stackblitz.com/edit/hello-angular-6-eu5ecu?file=src/app/app.component.html

edited Nov 21 at 11:30

answered Nov 21 at 11:13

לבני מלכה

7,8211523

instead use boolean property use number like show:number

and set an index (the current) to show on mouseenter/leave and in html ask if show==index

in HTML:

(you do not have to ask twice ngIf only in wrap div)

<input type="text" class="form-control"  (mouseenter)="show=i" (mouseleave)="show=0">

<div *ngIf="show==1">

  <div>your tooltip 1 </div>

</div>

See example:https://stackblitz.com/edit/hello-angular-6-eu5ecu?file=src/app/app.component.html

edited Nov 21 at 11:30

answered Nov 21 at 11:13

לבני מלכה

7,8211523

edited Nov 21 at 11:30

answered Nov 21 at 11:13

לבני מלכה

7,8211523

answered Nov 21 at 11:13

לבני מלכה

7,8211523

answered Nov 21 at 11:13

לבני מלכה

7,8211523

this.show==0?index:0; when I code in code this line in component.ts I am getting error
– goku naruto
Nov 21 at 11:52

do as my example: (mouseenter)="show=i" (mouseleave)="show=0" you do not have to use function
– לבני מלכה
Nov 21 at 11:52

and *ngIf="show==1" in html
– לבני מלכה
Nov 21 at 11:53

I tried but it still shows the data only in 2nd input field
– goku naruto
Nov 21 at 12:36

I belive your i starts from 0 so use to first *ngIf="show==0" and second *ngIf="show==1" and etc.
– לבני מלכה
Nov 21 at 12:37

|
show 5 more comments

this.show==0?index:0; when I code in code this line in component.ts I am getting error
– goku naruto
Nov 21 at 11:52

do as my example: (mouseenter)="show=i" (mouseleave)="show=0" you do not have to use function
– לבני מלכה
Nov 21 at 11:52

and *ngIf="show==1" in html
– לבני מלכה
Nov 21 at 11:53

I tried but it still shows the data only in 2nd input field
– goku naruto
Nov 21 at 12:36

I belive your i starts from 0 so use to first *ngIf="show==0" and second *ngIf="show==1" and etc.
– לבני מלכה
Nov 21 at 12:37

this.show==0?index:0; when I code in code this line in component.ts I am getting error
– goku naruto
Nov 21 at 11:52

do as my example: (mouseenter)="show=i" (mouseleave)="show=0" you do not have to use function
– לבני מלכה
Nov 21 at 11:52

and *ngIf="show==1" in html
– לבני מלכה
Nov 21 at 11:53

I tried but it still shows the data only in 2nd input field
– goku naruto
Nov 21 at 12:36

I belive your i starts from 0 so use to first *ngIf="show==0" and second *ngIf="show==1" and etc.
– לבני מלכה
Nov 21 at 12:37

|
show 5 more comments

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl