I have a tooltip on a save button, when the button is disabled (e.g. invalid data is entered), I want to show a tooltip and then after some delay make it disappear. I use
tooltip-is-open to open the tooltip, but then I dont know how to close it. I tried
tooltip-popup-close-delay but that needs a close trigger.
Here is a simple version of the code:
<button ng-disabled="$ctrl.isInvalid">
<span
class="glyphicon glyphicon-save"
uib-tooltip="Some message"
tooltip-enable="$ctrl.isInvalid"
tooltip-is-open="$ctrl.isInvalid"></span>
Save
</button>
Related
I have a onMouseOver event that triggers an alert box. See the code below. However, it will trigger that event even if I hover the mouse to the right of the text. That is part of my problem. All I want is to have it triggered when hovering over the text itself.
The next issue is, depending on which li element I hover over, I need to to trigger an event that takes into considering which piece of text it is hovering over. For example, if I hovered over the first item in the White Advantages image, it would know that it is about being uncastled and act accordingly. If it was the second item, it would know it is about semi-open files and then act accordingly. How do I do this?
<li style={litags} onMouseOver={() => alert('hover')}>
<span style={tags} key={index1}>
{name1}
</span>
</li>
I am following the sample code as per this link:
http://angular-ui.github.io/bootstrap/versioned-docs/1.3.3/#/modal
The plunker sample here:
http://plnkr.co/edit/JMV4Hu2x9l9DA9gaGYaF?p=preview
I tried to define a custom template customModal.html using windowTemplateUrl to add a close button (top-right) to the modal box, but the modal dialog won't show properly and I see only dark background and the modal is kind dimmed. Also, the buttons are not responding.
Appreciate if someone could help me define such custom template to allow using close button for all similar modal dialog boxes.
Update: I want to explain why this is not a possible duplicate of this question as suggested. The other question is dealing with "Why we get error when we open the dialog when we specify the template only". In this question, I the template is not showing proper even though I followed the instruction to implement it.
Tarek
in your script template add
<div class="modal-header">
<button type="button" class="close" data-dismiss="dialog" data-ng-
click="cancel($event)">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4>Title</h4>
</div>
I am trying to use hover to show dropdown / popover and use data-container="self" to make the dropdown / popover stay appear when mouse moved to it. This method works on Google Chrome but not on Firefox.
Example Code:
<button type="button" data-placement="right" data-trigger="hover | click" data-delay="300" bs-dropdown="dropdown" data-container="self">Click to toggle dropdown</button>
How can I get it works on firefox?
I never heard of the self keyword as the container parameter in angular-strap. Where does it come from?
Anyway, here, container is useful if you want to append the dropdown to another element. Since it does not seem to be your case, simply do not provide data-container, and the dropdown will be appended to the element itself.
EDIT:
Okay, so, I tried, and saw the problem you are describing. You could try the solution given here (https://stackoverflow.com/a/21293850/4506790): add a specific class to your button, and give it in data-container.
<button type="button"
class="dropdown-btn"
data-placement="right"
data-trigger="hover"
data-delay="300"
bs-dropdown="dropdown"
data-container=".dropdown-btn">
Hover to toggle dropdown
</button>
I am trying to create a button in angularjs with a img tag where it's image changes to disabled state using css. I am using2 class 1 for enabled other for disabled.
<button class="save-button" ng-disabled="{{isEnabled}}"></button>
Please help my plunker for the problem
when using ng-disabled, the expression should be a true/false value to determine if the button is actually disabled.
The code shoud look like this:
<button class="save-button" ng-disabled="!isEnabled" ng-click="test()"></button>
<button title="Toggle" ng-click="isEnabled = !isEnabled">toggle</button>
Now the button is disabled when the 'isEnabled' value is set to false.
I fixed your plnkr
I've been using ionic's angular framework to create a comment list and a comment input box on the bottom of a mobile web page. I am trying to set up a function so that if a user clicks on the comment box or button it throws up a login modal before letting them comment/continue. I ended up disabling the input initially so that it doesn't bring up the keyboard which hides/pushes my modal login view.
The issue I'm running into is that the clickable area seems to be the entire div and button except for the input text area (which is most of the hit area). How can I get it to do the checkAuth on the input text hit area while input is disabled... or conversely, if I move the checkauth to the input onclick event, how can I enable the input and not have it bring up a keyboard.
<div class="bar bar-footer item-input-inset" style="position:fixed; " ng-click="checkAuth()">
<label class="item-input-wrapper">
<input type="text" placeholder="comment" ng-disabled="true">
</label>
<button class="button button-small" ng-disabled="true">
Submit
</button>
</div>
Unless you need to support IE 10 and earlier, you could try setting pointer-events: none on the input when it's disabled.