How to show popover if user only starts typing in input field?

988 Views Asked by At

I have an input field, I want to show a popover only when user types into the field and I don't want to show the popover for the first time when the input field is empty. I have written the following code but it shows the popover for the first time I click on it ! Any way to fix that? here is the plnkr to show the issue:

http://plnkr.co/edit/d6WzzJYgDHlBmx1Pfb9L?p=preview

<input type="text"
    value="Click me!" 
    ng-model="value"
    popover-is-open="!!value"  
    uib-popover="This must be shown when use has typed value"  
    popover-trigger="focus"
    class="form-control">
4

There are 4 best solutions below

2
Pol Gasull Navarro On

Try this code please, I changed click to change.

<div ng-controller="PopoverDemoCtrl">
  <br />
  <br />
  <br />
    <input type="text"
    value="Click me!" 
    ng-model="value"
    popover-is-open="!!value"  
    uib-popover="This must be shown when use has typed value"  
    popover-trigger="change"
    class="form-control">

    <br />
    {{value}} -- {{!!value}}
</div>

Tell me,

thanks!

0
Rathma On

I found a way to get my desired result, Here is how:

<input type="text"
    value="Click me!" 
    ng-model="value"
    popover-is-open="!!value && popUpOpen"  
    uib-popover="This must be shown when use has typed value"  
    popover-trigger="none"
    ng-blur="popUpOpen = false"
    ng-focus="popUpOpen = true"
    class="form-control">
1
Tom Edwards On

I know you found a soloution,this uses uib aswell and uses the trigger 'mouseclick'

<input vm.detectChange popover-append-to-body="true"  popover-placement="right" uib-popover-template="'popup.html'" popover-is-open="isOpen" popover-trigger="mouseclick" popover-title="Popup: ">
0
khush On

I tried many other solutions, but this only worked for me.

I solved this by adding a new button with visibility hidden and binding popover with this button. On enter click of input I opened this popover manually.