Angular uib-popover muestra en position incorrecta cuando se establece en text desbordado

Tengo un ejemplo práctico de mi problema aquí: http://plnkr.co/edit/vwZS5e?p=preview

Aquí está el lapso del problema:

<div class="test-container"> <span uib-popover="Test" popover-placement="top" popover-trigger="mouseenter" popover-append-to-body="true"> MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe </span> </div> 

Intento mostrar un popover sobre el centro de este tramo cuando lo paso sobre él. Estoy usando el desbordamiento de text para cortar el text cuando es demasiado largo. Pero parece que uib-popover no tiene en count el desbordamiento … el popover aparece demasiado lejos hacia la derecha.

Aquí está mi css:

 .test-container { text-overflow:ellipsis; overflow:hidden; width:100px; border:1px solid networking; margin-top:50px; margin-left:50px; } 

Sé que puedo colocar el popover en el div del contenedor de testing, pero preferiría que el popover estuviera en el centro del tramo.

¿Alguien tiene una idea sobre cómo solucionar esto?

<span> es un elemento en inline y el width de un elemento en inline depende de su contenido. Si agrega más contenido, su ancho boostá y viceversa.

En la situación anterior, tiene una cadena de text muy larga, incluso sin espacios. Si va a inspeccionar su <span> , verá que el width de <span> es mucho más grande que el width de su .test-container primario .test-container .

uib-popover toma su position de acuerdo con el width de <span> . Si aumenta o disminuye el contenido del elemento <span> , también verá cambios en la position de uib-popover .

Puede solucionar esto haciendo <span> un elemento de block y moviendo properties de recorte de text en él.

 (function(){ 'use strict'; angular .module('app', ['ui.bootstrap', 'ngAnimate']); })(); (function(){ 'use strict'; angular .module('app') .controller('appController', AppController); AppController.$inject = ['$log', '$timeout']; function AppController($log, $timeout) { var vm = this; return vm; } })(); 
 html, body { background-color:darkgray; } .test-container { width:100px; border:1px solid networking; margin-top:50px; margin-left:50px; } .test-container span { text-overflow:ellipsis; overflow:hidden; display: block; } 
 <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script data-require="bootstrap@*" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script> <div ng-app="app" data-ng-controller="appController as vm"> <div class="test-container"> <span uib-popover="Test" popover-placement="top" popover-trigger="mouseenter" popover-append-to-body="true"> MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe </span> </div> </div>