I am working with AngularJS, CSS and HTML.
Here's what I'm trying to do:
A button gets disabled based on the output of a certain function isPublished(). I need the hover text over the button like When the button is disabled the hover over text could be "I'm disabled" and when it is not disabled the hover over text could be "I'm not disabled".
Code:
<span>
<input title="Im disabled" type="button" class="btn btn-primary"
value="Publish" ng-click="publishFingerPrint()" ng-hide="isEdit"
ng-disabled="isPublished()"/>
</span>
<script>
$(function () {
$(".btn btn-primary:ng-disabled").wrap(function() {
return '<span title="' + $(this).attr('title') + '" />';
});
});
</script>
With the above code, I get the hover text on the button (when disabled and when not disabled). But the problem is that the text is the same = Im not disabled. I need 2 different texts. Also I tried ng-mouseover but for some reason it is not working so I went with title attribute.
Can anyone help me out with this? Any help is appreciated! Thanks!
I am working with AngularJS, CSS and HTML.
Here's what I'm trying to do:
A button gets disabled based on the output of a certain function isPublished(). I need the hover text over the button like When the button is disabled the hover over text could be "I'm disabled" and when it is not disabled the hover over text could be "I'm not disabled".
Code:
<span>
<input title="Im disabled" type="button" class="btn btn-primary"
value="Publish" ng-click="publishFingerPrint()" ng-hide="isEdit"
ng-disabled="isPublished()"/>
</span>
<script>
$(function () {
$(".btn btn-primary:ng-disabled").wrap(function() {
return '<span title="' + $(this).attr('title') + '" />';
});
});
</script>
With the above code, I get the hover text on the button (when disabled and when not disabled). But the problem is that the text is the same = Im not disabled. I need 2 different texts. Also I tried ng-mouseover but for some reason it is not working so I went with title attribute.
Can anyone help me out with this? Any help is appreciated! Thanks!
Share Improve this question edited Jun 22, 2018 at 16:31 georgeawg 49k13 gold badges77 silver badges98 bronze badges asked Sep 22, 2016 at 7:39 Nikhil HegdeNikhil Hegde 3511 gold badge3 silver badges17 bronze badges2 Answers
Reset to default 2It seems that you want to change the title (hover title) dynamically or on some action, that can be done specificying title attribute as ng-attr-title="{{ message }}"
You can change the title in your ngDisabled function.
$scope.isPublished = function(){
$scope.message = "I'm disalbed";
}
var app = angular.module('myApp', []);
function ctrl($scope) {
$scope.message = "Old Title";
$scope.changeTitle = function(){
$scope.message = "New Title";
};
}<script src="http://code.angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<div ng-attr-title="{{ message }}">Hover me</div>
<br/><br/>
{{message}}
<button ng-click="changeTitle()">Change Hover Title</button>
</div>You can try something like this.
<body ng-app="app" ng-controller="ctr">
<button type="button" class="btn btn-primary" ng-click="disable = !disable;changeTitle();">Click</button>
<input title="{{title}}" type="button" class="btn btn-primary" value="Publish" ng-disabled="disable"/>
<script>
angular.module('app',[]).controller('ctr',function($scope){
$scope.changeTitle = function(){
$scope.title = $scope.disable ? 'I m disabled' : 'I m not disabled';
}
})
</script>
</body>
Have a look into working plunker.