I want to show the variable state in tooltip of bootstrap, but its not getting the variable content its shows the variable name "Pump 2 {{pumpStatus2.helpText}}", and it should appear "Pump 2 On/Off" according the variable content, it works with the title when I mouse over the image.
<img class="pump" id="pump2" title="Pump 2 {{Status2.helpText}}"
ng-src="img/{{Status2.status}}" data-toggle="tooltip">
Have you considered adding ui.bootstrap as a dependency in your module? This will allow you to get bootstrap features through angular. Here is an example using a dynamic tooltip (uib-tooltip). More bootstrap examples can be found at: http://angular-ui.github.io/bootstrap/
angular.module('myApp', ['ui.bootstrap'])
.controller('MainController', function ($scope) {
var pump = {};
$scope.pump = pump;
pump.state="off";
pump.setState = function (state) {
pump.state = state;
}
});.pump-image {
background: url('https://gauchedecombat.files.wordpress.com/2012/05/on-off.png') no-repeat;
height: 270px;
width: 262px;
}
.on {
background-position: 0 0;
}
.off {
background-position: -262px 0;
}<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<div ng-app="myApp" ng-controller="MainController as ctrl">
<input type="radio" ng-model="pump.state" value="off" />Off
<input type="radio" ng-model="pump.state" value="on" />On
<div uib-tooltip="Pump: {{pump.state}}" class="pump-image" ng-class="{on: pump.state === 'on', off: pump.state==='off'}" tooltip-placement="right"></div>
</div>
Here is a working sample: http://plnkr.co/edit/KNjxPZLFcUKS2M2fHj5G?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Hello Plunker!</h1>
<img ng-src="{{imgUrl}}" alt="Smiley face" title="Test String {{imgTitle}}" height="42" width="42">
</body>
</html>
JavaScript:
angular.module('app',[]);
angular.module('app').controller("MainCtrl",function($scope){
$scope.imgUrl = "http://b3.us.is.pp.ru/m/mink_blue/1/45377641oJC.jpg";
$scope.imgTitle = "Hello World!";
});
Is your app wired correctly? Please check the controller and the variables in scope. Or try to share a plunk.
