CODEWITHSUNDEEP
htmlangularjs
changez
changez

Reputation: 77

Show variable content in bootstrap tooltip

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">

Upvotes: 0

Views: 6888

Answers (2)

Patrick
Patrick

Reputation: 6948

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>

Upvotes: 1

takeradi
takeradi

Reputation: 3861

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.

Upvotes: 1

Related Questions