Wie kann ich einen Tooltip-Div ändern, je nachdem, auf welcher Seite des Bildschirms er sich befindet? (AngularJS)

Ich benutze AngularJs, um ein li unzählige Male in Form eines Gitters zu wiederholen, und ich habe ein Beschreibungsfeld, das an der Seite von jedem li angezeigt wird, wenn ich über ihnen schwebe. Aber wenn ich über die Rasterelemente auf der rechten Seite des Rasters schwebe, möchte ich, dass das Beschreibungsfeld auf der anderen Seite angezeigt wird, damit es nicht vom Bildschirm verschwindet.Wie kann ich einen Tooltip-Div ändern, je nachdem, auf welcher Seite des Bildschirms er sich befindet? (AngularJS)

Hier ist ein jsfiddle zu erklären, was ich meine:

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>

Mein Gitter ändert sich auch wird so ein Element auf der rechten Seite auf dem Bildschirm je nach Größe nicht immer auf der rechten Seite sein Seite ...

Gibt es eine Möglichkeit, die Rasterelementklasse mit eckigen zu ändern, je nachdem, auf welcher Seite des Bildschirms sie sich befindet? oder eine andere Möglichkeit, dies zu beheben?

Dank

Quelle

2016-05-19 Fergus O' Hagan

einige Code Stehlen von beliebten Open-Source-ui-Frameworks ein Tooltip oder den Dialog mit ... wie Bootstrap, jQuery UI ... –

ich zwei Klassen für den Tooltip definieren würde, eine für links und rechts und verwenden ng-Klasse dann eine Funktion aufzurufen. Innerhalb der Funktion werten Sie die Position des Elements aus, für das es aufgerufen wurde, und geben Sie die entsprechende Klasse zurück. Unten ist ein ziemlich vollständiges Beispiel, das Sie in Ihrem Fall anwenden können.

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

Quelle

2016-05-19 15:39:53

wissen Sie, eine Möglichkeit, die Position des Elements bewerten könnte? –

Da gehen Sie hin. Ich habe die Antwort aktualisiert. –

BTW, Sie können die Layout-Sachen ignorieren, die ich dort mit den divs gemacht habe. Ich habe einfach eine Startvorlage, die ich als Scratchpad benutze, die Angular Material verwendet, aber es gibt nichts Bestimmtes für eckiges Material, das verwendet wird, um die Objektposition oder Klasse zu bestimmen. –

Wie kann ich einen Tooltip-Div ändern, je nachdem, auf welcher Seite des Bildschirms er sich befindet? (AngularJS)

Antwort

Verwandte Themen