Is there a way to automatically adjust the position of a tooltip div based on its location relative to the screen in AngularJS?

Question

Is there a way to automatically adjust the position of a tooltip div based on its location relative to the screen in AngularJS?

I've implemented AngularJs to create a grid with repeated li elements, each displaying a description box when hovered over. However, I am facing an issue where the description box goes off-screen when hovering over items on the right side of the grid.

Check out this jsfiddle for clarification:

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>

  // More li elements

</ul>

The layout of my grid is responsive, making it difficult to determine which side of the screen an item will be located on. Is there a way to dynamically change the grid item class in Angular based on its position within the grid?

Thank you!

html css angularjs grid tooltip

Answer 1

Answer №1

To create customized tooltips, I recommend defining two separate classes - one for left and one for right positioning. Then, utilize the ng-class directive to call a function that will determine the appropriate class based on the element's position. Below is a detailed example that you can easily adapt to suit your specific scenario.

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

        .right {
            background: skyblue;
        }
    </style>
</head>
<body ng-app="myApp">
    <div layout="row" flex="100" ng-controller="customController as ctrl">
        <div flex="50" ng-class="ctrl.findClass('left')" id="leftTooltip">
            <h1>{{ctrl.greetings}} Left Tooltip</h1></div>
        <div flex="50" ng-class="ctrl.findClass('right')" id="rightTooltip">
            <h1>{{ctrl.greetings}} Right Tooltip</h1></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js "></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js "></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js "></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js "></script>
    <script>
        angular.module('myApp', []).controller("customController", customController);

        function  customController($scope){
            var ctrl = this;
            ctrl.greetings ="Greetings"
            ctrl.findClass = findClass; 

            function findClass(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>

Answer 2

To create customized tooltips, I recommend defining two separate classes - one for left and one for right positioning. Then, utilize the ng-class directive to call a function that will determine the appropriate class based on the element's position. Below is a detailed example that you can easily adapt to suit your specific scenario.

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

        .right {
            background: skyblue;
        }
    </style>
</head>
<body ng-app="myApp">
    <div layout="row" flex="100" ng-controller="customController as ctrl">
        <div flex="50" ng-class="ctrl.findClass('left')" id="leftTooltip">
            <h1>{{ctrl.greetings}} Left Tooltip</h1></div>
        <div flex="50" ng-class="ctrl.findClass('right')" id="rightTooltip">
            <h1>{{ctrl.greetings}} Right Tooltip</h1></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js "></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js "></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js "></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js "></script>
    <script>
        angular.module('myApp', []).controller("customController", customController);

        function  customController($scope){
            var ctrl = this;
            ctrl.greetings ="Greetings"
            ctrl.findClass = findClass; 

            function findClass(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>

Is there a way to automatically adjust the position of a tooltip div based on its location relative to the screen in AngularJS?

Answer №1

Similar questions

Angular controller uses Javascript variables to store and manipulate data within the

Angular Pagination: A Detailed Guide

Disappearing a menu list while zooming in on a page: The art of vanishing navigation

What is the best way to calculate the number of div elements with a specific class that are contained within parent div elements with another specific class?

Having difficulty locating the identification number of an item within the HTML coding

Shifting and implementing various styles across numerous elements at the same time

The most effective method for incorporating a header and footer into an HTML page utilizing a variety of client-side frameworks

AngularJS is not properly clearing the datepicker

Assign the value from JavaScript to the element with the "ng required" attribute, without resetting frm.$error.required to false

What steps should I take to create a slider using my image gallery?

Can a universal Save File As button be created for all web browsers?

What is the best way to serve a .ttf file in node.js with the http and fs libraries?

What are the specifications for the opacity, width, and height of the background image in Bootstrap's

How To Access a View by Clicking in Ionic Framework

Retrieve Claims using Security Token Service and AngularJS

How can I display an array with keys from php in AngularJS using ng-repeat?

Oops! You can only have one parent element in JSX expressions

Find a solution to splitting the area in half, with one side designated for the icon and the other for text

Adding flair to a fresh element and then removing it upon its inception

A perfect illustration showcasing the distinction in practical applications for the operators `=` and `&`