どのように画面上のどの部分にツールチップの変更を変更するのですか？（AngularJS）

私はAngularJsを使ってliをグリッドの形で何回も繰り返し、私がそれらの上にマウスを置くと、それぞれのliの側に表示される説明ボックスを持っています。グリッドの項目をグリッドの右側に置くと、説明欄が反対側に表示され、画面から外れません。どのように画面上のどの部分にツールチップの変更を変更するのですか？（AngularJS）

ここで私が何を意味するか説明するjsfiddleです：

ul { 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li { 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin: 0; 
 
    width: 20%; 
 
    padding: 5px; 
 
} 
 
li:hover .info { 
 
    opacity: 1; 
 
    transition: 0.5s; 
 
} 
 
.image { 
 
    width: 100%; 
 
    background-color: red; 
 
    height: 100px; 
 
} 
 
.info { 
 
    position: absolute; 
 
    background-color: yellow; 
 
    padding: 0px 5px; 
 
    width: 200%; 
 
    top: 0; 
 
    left: 100%; 
 
    opacity: 0; 
 
    transition: 0.5s; 
 
    z-index: 100; 
 
}

<ul> 
 
    <li> 
 
    <div class="image"></div> 
 
    <p>Hover over me</p> 
 
    <div class="info"> 
 
     <p>Description Here</p> 
 
    </div> 
 
    </li> 
 

 
    <li> 
 
    <div class="image"></div> 
 
    <p>Hover over me</p> 
 
    <div class="info"> 
 
     <p>Description Here</p> 
 
    </div> 
 
    </li> 
 

 
    <li> 
 
    <div class="image"></div> 
 
    <p>Hover over me</p> 
 
    <div class="info"> 
 
     <p>Description Here</p> 
 
    </div> 
 
    </li> 
 

 
    <li> 
 
    <div class="image"></div> 
 
    <p>Hover over me</p> 
 
    <div class="info"> 
 
     <p>Description Here</p> 
 
    </div> 
 
    </li> 
 

 
    <li> 
 
    <div class="image"></div> 
 
    <p>Hover over me</p> 
 
    <div class="info"> 
 
     <p>Description Here</p> 
 
    </div> 
 
    </li> 
 

 
    <li> 
 
    <div class="image"></div> 
 
    <p>Hover over me</p> 
 
    <div class="info"> 
 
     <p>Description Here</p> 
 
    </div> 
 
    </li> 
 

 
    <li> 
 
    <div class="image"></div> 
 
    <p>Hover over me</p> 
 
    <div class="info"> 
 
     <p>Description Here</p> 
 
    </div> 
 
    </li> 
 

 
    <li> 
 
    <div class="image"></div> 
 
    <p>Hover over me</p> 
 
    <div class="info"> 
 
     <p>Description Here</p> 
 
    </div> 
 
    </li> 
 
</ul>

私のグリッドは、画面サイズに応じて、その右側の項目は常に右になりません変更サイド...

画面のどの側面に表示されているかによって角度を使ってグリッドアイテムクラスを変更する方法はありますか？これを固定する他の方法はありますか？

おかげ

出典

2016-05-19 Fergus O' Hagan

、jQueryのUI ... –

私は、ツールチップのための2つのクラス、左用と右のための1つを定義し、関数を呼び出すためにNG-クラスを使用します。関数の内部では、呼び出された要素の位置を評価し、適切なクラスを返します。以下は、あなたのケースに適用できるはずのかなり完全な例です。

<html> 
<head> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css" /> 
    <style> 
     .left { 
      background: #ff8a80; 
     } 

     .right { 
      background: green; 
     } 
    </style> 
</head> 
<body ng-app="app"> 
    <div layout="row" flex="100" ng-controller="myController as ctrl"> 
     <div flex="50" ng-class="ctrl.getClass('left')" id="left"> 
      <h1>{{ctrl.hello}} Left</h1></div> 
     <div flex="50" ng-class="ctrl.getClass('right')" id="right"> 
      <h1>{{ctrl.hello}} Right</h1></div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js "></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js "></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js "></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js "></script> 
    <script> 
     angular.module('app', []).controller("myController",myController); 

     function myController($scope){ 
      var ctrl = this; 
      ctrl.hello ="Hello" 
      ctrl.getClass = getClass; 


      function getClass(id) { 
       var e=document.getElementById(id); 
       var rect = e.getBoundingClientRect() 

       if (rect.left < (document.body.clientWidth/2)-1) { 
        return "left" 
       } 
       return "right" 
      } 
     }; 
    </script> 
</body> 
</html>

は、ブートストラップのようにツールチップや対話を持つ人気の高いオープンソースのUIフレームワーク...からいくつかのコードを盗む

出典

2016-05-19 15:39:53

あなたは、私は要素の位置を評価する可能性がどのような方法を知っていますか？ –

あなたは行きます。私は答えを更新しました。 –

ところで、私がdivで行ったレイアウトのことは無視することができます。私は角度のある素材を使用するスクラッチパッドとして使用する開始テンプレートを並べ替えていますが、オブジェクトの位置やクラスを決定するために使用する角度のある素材には何もありません。 –

どのように画面上のどの部分にツールチップの変更を変更するのですか？ （AngularJS）

答えて

関連する問題

どのように画面上のどの部分にツールチップの変更を変更するのですか？（AngularJS）