Angularjs mouseover popup

Question

如何在div上鼠标悬停时创建弹出窗口。

http://jsfiddle.net/akA6H/39/

在这个小提琴鼠标悬停弹出功能正常。但是当悬停在选项名称上时，只有弹出窗口是打开的。如何在div上悬停时打开弹出窗口。

＆＃13;

＆＃13;

// Code goes here

'use strict';

var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('myCtrl', ['$modal', '$scope', '$log',
    function ($modal, $scope, $log) {
      $scope.option = {
        name: 'Name (hover over for more details)',
        longDescription: 'This is my detailed description...  lots of text here'
      }
       $scope.showOptionDetails = function(option) {
            $log.info($scope.option);
            $scope.optionModal = $modal.open({
                template: '<div class="modal-header" ng-mouseleave="close()"><h3 class="modal-title">Option</h3></div><div class="modal-body">{{option.longDescription}}</div><div class="modal-footer" ng-click="close()">Close</div>',
                controller: 'modalCtrl',
                resolve: {
                    option: function() {
                      return $scope.option;
                    }
                }
            });
       }

        $scope.closeOptionDetails = function() {
            $scope.optionModal.close();
        }
      }
  ]);
  
  myApp.controller('modalCtrl', [
    '$modalInstance', '$scope', '$log', 'option', function ($modalInstance, $scope, $log, option) {
      $log.info(option);
      $scope.option = option;
        $scope.close = function() {
            $modalInstance.close();
        }
    }
]);

＆＃13;

 <h1>Hello Plunker!</h1>
    <div ng-controller="myCtrl">
      <span ng-mouseover="showOptionDetails(option)" >{{option.name}}</span>  
    </div>

＆＃13;

＆＃13;

＆＃13;

在这里，我想要一个空的弹出窗口，同时将鼠标悬停在div标签上。请帮帮我怎么做？