Hello I want my tooltip to appears whenever input[submit] is disabled. Disabling input works very well it is disabled when inputs[text] are invalid but tooltips doesn't shows.
Here is my code:
<input type="submit"
form="loginData"
ng-disabled="loginData.login.$invalid || loginData.password.$invalid"
class="btn btn-primary btn-md"
ng-click="$ctrl.login()"
value="Zaloguj"
uib-tooltip="Wypełnij formularz!"
tooltip-placement="top"
tooltip-trigger="'mouseenter'"
tooltip-append-to-body="true"
tooltip-enable="loginData.login.$invalid || loginData.password.$invalid" />
tooltip-enable directive should make tooltip enabled when input login or password are invalid but it doesn't work, please quick help!
EDIT:
I was working with google chrome so I didn't realize that this solution actually works in others browsers (mozilla for sure). But still it doesn't work with newest google chrome so it is not satisfactory enough.
Summarizing the new question is how to walk around that issue in google chrome?
HTML elements with disabled attribute do not fire events.
But don't worry, you can use a simple div/span with uib-tooltip directive as wrapper of the disabled input/button.
In your case you want to show the tooltip only when is disabed, so try the following... (PLUNKER)
HTML
<span uib-tooltip="Demo tooltip"
tooltip-enable="isBtnDisabled"
ng-class="{'my-tooltip': isDisabled}">
<input type="submit" ng-disabled="isDisabled" class="btn btn-info" value="My btn">
</span>
CSS
.my-tooltip {
display: inline-block;
}
.my-tooltip input {
position: relative;
z-index: -1;
}
Related
I have two button that are overlapping, and use ng-hide for the m with the same flag.
On Chrome it work perfectlly, but when I use IE 11, the icons are overlapping on page load.
I have two icons on in my search box:
And On IE11, when the page is loading:
The code is:
<button type="submit" class="btnSubmit" ng-show="vm.isSearchIconVisible" >
<i class="iconMglass"></i>
</button>
<button type="reset" ng-show="!vm.isSearchIconVisible" class="clearTextButton" ng-click="vm.clearSearchText()">
<span class="clearIcon">X</span>
</button>
How can I fix it ?
Try using ng-ifinstead of ng-show.
The ng-if directive removes the content from the page and ng-show/ng-hide uses the CSS display property to hide content.
Not using CSS by changing to ng-if prevents these CSS problems. Although the ng-ifcreates a new scope but that impact is nothing.
<button type="submit" class="btnSubmit" ng-if="vm.isSearchIconVisible" >
<i class="iconMglass"></i>
</button>
<button type="reset" ng-if="!vm.isSearchIconVisible" class="clearTextButton" ng-click="vm.clearSearchText()">
<span class="clearIcon">X</span>
</button>
If you don't want to change to ng-if, then please share a working Plunkr/... so help you find your problem. Since it will be a cssissue most likely.
The Problem was that IE11 save cash with old code, CTR+R dident solve this problem.
In the IE11 option I revoce the option to save cash and it solve the problem, the new code appear.
before posting here i searched and searched and i found several solutions for applying tooltips to disabled buttons, anyway none of these was using uib-tooltip from angular ui bootstrap.
Here is the code of my button:
<button class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="doThat()">Click Here
</button>
Do you know how to make tooltip displayable even when the button is disabled?
Similar to janosch's solution - wrap your button in a div which has the tooltip attribute.
<div uib-tooltip="{{ isDisabled ? 'Button is disabled' : '' }}">
<button disabled="isDisabled">Button</button>
</div>
The tooltip will only be visible when the variable isDisabled is true, which also sets the disabled status of the button.
This solution will also work if you are using the title attribute instead of uib-tooltip
I don't think it's possible on a button, but it works if you use link disguised as a button, instead of a button:
<a class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="doThat()">Click Here
</a>
Simplest, least intrusive solution to this is:
<a class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="isAllSelected ? doThat() : null">Click Here
</a>
(notice conditional ng-click, without which clicks will still go through even when anchor is "disabled" - i.e. anchors don't support disabled attribute)
I know this question is several years old however someone might find useful this workaround.
What I did was to wrap the button content in a <span> tag and apply the uib-tooltip to it:
<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true">
<span uib-tooltip="Tooltip text" tooltip-append-to-body="true"> Button text<span>
</button>
If you also need the tooltip to be shown when the user hovers over the whole button area, you can also remove the button padding and add it to the <span> instead.
<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true" style="padding: 0px !important;">
<span uib-tooltip="Tooltip text" tooltip-append-to-body="true" style="display:inline-block; padding: 5px 10px;"> Button text<span>
</button>
Irrespective of button being enabled or disabled, I am getting the uib tool tip. The below code is working fine for me.
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" ng-disabled = "true" uib-tooltip="After today restriction" >Min date</button>
Please see this plunker
Added screenshot of tooltip
Additional notes: You can also configure the position of tooltip. All you need to do is to take the help of $uibTooltipProvider. We can then use config section to achieve the result. Below code is included in the plunker.
angular.module('ui.bootstrap.demo')
.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
$uibTooltipProvider.options({
'placement':'bottom'
});
}])
I'm using Angular Bootstrap and want to have my tooltips trigger using a "hover" on desktop and "click" on mobile devices which can't hover but also have the tooltips close if you click outside the tooltip. I set it to tooltip-trigger="hover outsideClick" since "outsideClick" is now a supported trigger (https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs), however this breaks the tooltip completely so even the hover doesn't work.
<span class="glyphicon glyphicon-info-sign" tooltip-trigger="hover outsideClick" uib-tooltip="Tooltip text here"></span>
Is there any way to make these work together?
If I just use tooltip-trigger="hover click" it's decent, but on mobile I can only close the tooltip by clicking the item again, versus being able to click elsewhere on the page to close it.
Have you tried tooltip-trigger="mouseenter outsideClick"?
It seems likehover is not mentioned in the doc.
I think what you're looking for is the tooltip-trigger="hover focus", the focus will act as the outsideClick, closing the tooltip on the next click that the user makes. I've personally used this and it works great both for mobile and desktop.
It actually defaults to hover focus so you shouldn't even have to add them manually.
If there is any chance you can use the native bootstrap library? As it supports what you are looking for by default.
I have created a jsfiddle demonstrating this(please view it on your mobile device to see the tootlips working as expected)
HTML:
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</div>
JS:
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
You can read up on it here, as a side note, you have to manually enable the tooltip
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
I want to hide only clear button from datepicker directive in angular js.
Currently there are three buttons at the bottom of the angular js datePicker directive(Today, clear and Close), Is there any way to make visibility of these buttons configurable, such that i can hide one of the buttons out of it.
The Date picker which i am using is using ui-bootstrap library.
Currently there is now way to hide individual buttons in the datepicker button bar via options on the directive. You can override the template and remove the clear button, but that is a global patch and doesn't offer hiding/showing based on a condition. You could create a class that targets the button you want to hide as this plunk
.datepicker-noclear [ng-click="select(null)"] {
display: none;
}
demonstrates although that is a fragile workaround.
I would suggest submitting a feature request to add the option of which buttons are available in the button bar.
Easy, replace the template:
<script type="text/ng-template" id="template/datepicker/popup.html">
<ul class="dropdown-menu" ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
</li>
</ul>
</script>
You hack with css. It worked for me.
.ui-datepicker .btn-group .btn-danger.btn{
display: none;
}
Further to Rob J's solution, if we add a ng-class={"require": "vm.required"} to the parent div of the datepicker input, or simply add a class called require to the div. Then use the magic css to hide or show the clear button depending on the value of vm.required:
.require button[ng-click^="select(null)"] {
display: none;
}
if you want to remove the clear button, it means that the field is required, and as I do not agree with forcing things (like creating a div parent and typing classes), then just set the element for which you active the datepicker as required
[uib-datepicker-popup][required] + [uib-datepicker-popup-wrap] button[ng-click*="select(null"] {
display: none;
}
<input type="text" ng-model="datePicker.date" uib-datepicker-popup="dd MMM yyyy" readonly is-open="datePicker.opened" ng-click="datePicker.opened = true" required />
You can do this css trick to hide the clear button :
.uib-button-bar > .btn-group > .btn-danger {
display: none !important;
}
You can hide it by adding to style.css this :
.uib-clear {
display: none;
}
I'm using the datepicker in the Angular bootstrap collection. (http://angular-ui.github.io/bootstrap/).
I know that you can disable individual dates in the datepicker, but I need to disable the whole datepicker, as shown in this blog post (which uses jQuery).
How would you disable the whole datepicker using Angular?
It seems there is no way of doing this directly. But there are some workarounds which were discussed in https://github.com/angular-ui/bootstrap/issues/1113
Instead you can make a scope variable that will indicate if datepicker is disabled and if yes, then hide datepiker at all and show the model of datepicker in a fancy container.
Other way is to set date-disabled to true, disable input and set show-button-bar to false.
But again...those are workarounds ... you may try to make them look prettier by wraping to the custom directive like datepicker-disable if you want. Or wrap jquery datepicker you like into angular directive, which will be a bit more work.
If I understand what you are asking correctly, I had the same problem. This is what I did to disable and enable the entire datepicker in Angular. I know you already have your answer but I figured I would share anyways.
Here is my HTML/bootstrap (which I got from the website you added at the top http://angular-ui.github.io/bootstrap/ almost half way down the page): All I did was add ng-disabled="disabled" to the input and button tags. disable is just a $scope variable that gets set to true or false when some event happens in my app
<div class="col-md-6, nonFields" style="margin-top:6px;">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" is-open="opened1" ng-model="dtClosed" ng-required="true" close-text="Close" ng-disabled="disabled"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'opened1', 'opened2', 'opened3')" ng-disabled="disabled"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
In my angular js code I set $scope.disabled to true at the top
$scope.disabled = true;
Then when the user clicks a button and with the correct input I pretty much set $scope.disabled to false
$scope.shortCodeClick = function(){
$scope.disabled = false;
};
and the entire datepicker becomes enabled. With this you can obviously customize what you want to do with whatever event and flip the datepicker back and forth from enabled to disabled and back. Hope this helps.
See the code, it watch the ngDisabled attribute value, because the control can be disabled conditionally
scope.$watch(attr.ngDisabled, function (newVal) {
if(newVal === true)
$(elm).datepicker("disable");
else
$(elm).datepicker("enable");
});
For complete article and demo see the link and many more like how to use start and end date validation
I found well working solution here: look at bradrisse comment
Using this CSS:
.disabled-picker { cursor: not-allowed; } .disabled-picker:before { content: "";
z-index: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.8); }
And the HTML:
<div ng-class="{'disabled-picker': anyBoolHere }">
<datetimepicker ng-model="data.date"></datetimepicker>
Does the trick.