I am testing angularJS and ui-bootstrap tooltips :
http://angular-ui.github.io/bootstrap/#/tooltip
What I want to achieve is a tooltip with some working buttons inside.
I have tried :
<input type="text" value="{{activity.name}}"
tooltip-html-unsafe='<button class="btn btn-primary btn-mini" ng-click="addChild(activity)">+</button>
<button class="btn btn-danger btn-mini" ng-click="remove(activity)">X</button>
<button class="btn btn-danger btn-mini" ng-click="removeChildren(activity)" ng-show="activity.children.length > 0">X children</button>'
tooltip-trigger="focus"
tooltip-placement="right" />
Which is ugly and does not work. The buttons are rendered but do not execute the 'ng-click'.
Is there some way I can tell the tooltip to fetch a partial and keep the ng-click functional ?
Tooltips that would contain "live" HTML (with AngularJS directives working etc.) are not supported in the current (0.5.) version of http://angular-ui.github.io/bootstrap/#/tooltip
You might want to open a feature request for this in https://github.com/angular-ui/bootstrap/issues?state=open
Related
I am trying to implement popover functionality using Bootstrap & angularJS but popup doesn't seem to work & i don't get any errors either. Any help would be highly appreciated
<button popover-template="'popover.html'"
popover-placement="top"
popover-trigger="click"
type="button"
class="btn btn-default">
Mouse over me
</button>
I added ngAnimate & ui.bootstrap as a dependent to my angular application. Here is the code for the popover.html
<label class="Label">
test
</label>
It doesn't acually create a popover on click & doesn't create an error message either.
The name of the directive is uib-popover-template:
<button ̶p̶o̶p̶o̶v̶e̶r̶-̶t̶e̶m̶p̶l̶a̶t̶e̶=̶"̶'̶p̶o̶p̶o̶v̶e̶r̶.̶h̶t̶m̶l̶'̶"̶
uib-popover-template="'popover.html'"
popover-placement="top"
popover-trigger="click"
type="button"
class="btn btn-default">
Mouse over me
</button>
For more information, see
Angular UI Bootstrap Directive API and Demo - Popover
For more information, see
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 change class btn-white to btn-primary for the selected Button
$scope.SelectedCombination = function (combinationId) {
$scope.selectedCombination =combinationId;
};
html
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId)" type="button">{{combination.name}}</button>
use ng-class.don't use any javascript function to set css.
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);clicked=true;" ng-class="{btn-primary:clicked}" type="button">{{combination.name}}
</button>
or you can use best approach:
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);" ng-class="{'btn-primary':selectedCombination==combination.combinationId}" type="button">{{combination.name}}
</button>
see plunker
There is something called Ng-Class. Ng-class,allow you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.class
In a large form, I'm using popovers to display error messages from the validation (I know, not best practice).
Now, I also want to add tooltips to display detailed explanation of the input.
However, using both, the tooltip and the popover directive (and their associated -trigger and -placement directives), the behavior is odd/buggy: Both, tooltip and popover are placed based on the popover-placement directive (ignoring the tooltip-placement) - and display the text provided for the popover.
<button class="btn btn-default"
popover="Popover" popover-trigger="mouseenter" popover-placement="right"
tooltip="Tooltip" tooltip-trigger="mouseenter" tooltip-placement="top" >
Label</button>
See this plunkr.
Any idea how to make this work?
They actually infact use the same placement function.
From the docs on popover:
The popover directive also supports various default configurations through the $tooltipProvider. See the tooltip section for more information.
Meaning if you had the following code:
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.options({
'placement': 'right'
});
}]);
It would change the default for both tooltips and popovers.
Best I can think of is it have some sort of wrapper around the element so you can do each in turn.
<button class="btn btn-default sampleBtn"
popover="Popover" popover-trigger="mouseenter" popover-placement="right">
<span tooltip="Tooltip" tooltip-trigger="mouseenter" tooltip-placement="top">
Tooltip + Popover
</span>
</button>
Demo in Plunker
A very Simple Way..Just Make a parent Span for the button and attach those properties with that Span. I have Some Code for that too
<span title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Some content in Popover on bottom">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</span>
Here is the JS Fiddle for that too
http://jsfiddle.net/h75k1fzj/