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

Update links within a designated div section

Incorporate text into the URL of the image

Approach to clearing form data and displaying a message post-submission in AngularJS

Angular neglects the specified animation timing

Hover shows no response

I am experiencing issues with the functionality of the jQuery function

Eliminating the bottom border of all buttons, except for the last three buttons in the list, solely using pure JavaScript, unless alternative methods are available

Attempting to alter an image with a click and then revert it back to its original state

Having trouble changing the Font Awesome icon on click?

Embed the YouTube video using the URL in the video tag

Testing the capabilities of AngularJS with e2e testing using the angular-recaptcha library

The issue of checkboxes not being sorted properly in Slick Grid

extracting an empty value from this variable

Leverage JQuery Mobile for smooth sliding and effortless deletion of list elements

Remove the <select> highlight specifically for Internet Explorer

Ways to make an AngularJS Expression show an empty value

Encountered an error when attempting to submit with Node.js and Express.js connected to MySql - "Cannot POST /login

The message "Temporary headers are displayed" appears in Chrome

Creating a single factory that consolidates multiple return statements

Create an interactive mechanism where one scrollbar dynamically adjusts another scrollbar and vice versa