I have an icon that resembles a chat bubble. If the position of the icon is not fixed, how can I display the chat bubble relative to the icon and adjust its position dynamically based on the icon's location? See image here
#logowrap{
padding: 8px;
cursor: pointer;
background-color: grey;
width: 4rem;
height: 4rem;
border-radius: 50%;
text-align: center;
font-family: "SF-Pro-Display-Regular,-apple-system,BlinkMacSystemFont,Helvetica Neue,Apple Color Emoji,sans-serif";
position: absolute;
right: 50%;
top: 50%;
animation: pulse 1.5s ease-in-out infinite both;
border: 2px solid grey;
}
.chat-container{
position: absolute;
bottom: 53%;
right: 50%;
}
.chat-bubble-2{
width: 170px;
height: 56px;
background-color: #6B8E23;
text-align: center;
padding: 0.2rem;
line-height: 58px;
color: #fff;
border-radius: 27px;
position: relative;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.chat-bubble-2::after{
content: '';
position: absolute;
height: 24px;
width: 26px;
border-bottom: 2px solid #6B8E23;
border-right: 2px solid #6B8E23;
border-left: 0px solid #6B8E23;
border-top: 0px solid #6B8E23;
top: 100%;
left: 74%;
transform: rotate(45deg);
margin-top: -22px;
background: #6B8E23;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="logowrap"></div>
<div class="chat-container" id="chatcontainer">
<div class="chat-bubble-2" id="bubbleEndHere">I'm Still here!!</div>
</div>
</body>
</html>Currently, the position is fixed. How can I dynamically adjust the chat bubble's position if the icon changes without relying solely on media queries? Any alternative methods or suggestions would be greatly appreciated. Thank you for your help.