Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/tooltipster.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-controller="myCtrl">
    <ol>
      <li ng-repeat="v in values">
        <span class="pop-over" data-content="{{v}}">
          {{v}}
        </span>
      </li> 
    </ol>
    <br />
    <input type="text" ng-model="addMe" />
    <button ng-click="addValue()">Submit</button>
  </div>
</body>
</html>
 
angular.module('myApp', []).
factory('myFactory', ['$http', function($http){
  
  function getImage(query) {
    return $http.jsonp('https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q='+query+'&callback=JSON_CALLBACK');
  }
  
  return {
    image: getImage
  };
}]).
controller('myCtrl', ['$scope', function($scope){
  $scope.values=['Jessica Alba', 'Jennifer Lawrence', 'Miesha Tate'];
  $scope.addValue = function(){
    $scope.values.push($scope.addMe);
    $scope.addMe = '';
  };
}]).
directive('popOver', ['myFactory', function(mf) {
  return {
    restrict: 'C',
    link: function(scope, element, attr) {
      
      element.
      bind('mouseenter',function(e) {   
         
         mf.image(attr.content).success(function(data){                 
             element.tooltipster({
               content: $('<span><img src="' + data.responseData.results[0].tbUrl + '" /> </span>')
             });
             element.tooltipster('show');
         });       
      }).
      bind('mouseleave',function(e) {
          element.tooltipster('hide');
      });
    }
  };
}]);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
gregorypro
0viewers