Weird shape on custom liquid

[seiza123]

Hello, I am getting a weird square pop up near my product title when I add this custom liquid. What might i be able to change to keep the liquid but remove the square? thanks

Weird square:

Custom liquid:

Code of liquid:

<style>
.tooltip-wrapper {
position: relative;
margin-top: 19px;
display: flex;
padding: 16px;
gap: 8px;
background: #ECFBFF;
color: black;
}

.tooltip-arrow:empty {
display: block;
}

.tooltip-arrow {
position: absolute;
height: 16px;
width: 16px;
background: #ECFBFF;
top: -8px;
left: 48px;
transform: rotateY(0deg) rotate(45deg);
}

.pulse-icon span {
position: relative;
display: flex;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #54DEFC;
animation: pulse 2s ease 0s infinite normal none;
margin: 10px;
}

.pulse-icon span::after {
content: "";
width: 16px;
height: 16px;
border: 1px solid #334FB4;
border-radius: 50%;
position: absolute;
left: -3px;
top: -3px;
}

.tooltip-content {
margin: auto;
font-size: 12px;
margin-left: 0px;
}
@keyframes pulse {
0% {
transform: scale(0.95);
opacity: 1;
}
70% {
transform: scale(1.5);
opacity: 0;
}
100% {
transform: scale(0.95);
opacity: 0;
}
}

.container-krismotion {
display: flex;
flex-direction: row;
}
</style>
<div class="container-krismotion">
<div class="tooltip-arrow"></div>
<div class="pulse-icon"><span></span></div>

<p class="tooltip-content">
<b><span class="people-shopping">54</span> People</b> are checking out...
</p>
</div>

<script>
// Function to generate a random number between min and max
function generateRandom(min = 40, max = 60) {
return Math.floor(Math.random() * (max - min + 1) + min);
}

// Function to update the number of people shopping every 10 seconds
function updatePeopleShopping() {
var randomPeople = generateRandom(40, 60); // Adjust range as needed
var peopleShoppingElement = document.querySelector('.people-shopping');
if (peopleShoppingElement) {
peopleShoppingElement.textContent = randomPeople;
}
}

// Run the function initially and then every 10 seconds
document.addEventListener('DOMContentLoaded', function() {
updatePeopleShopping(); // Initial number display
setInterval(updatePeopleShopping, 10000); // Update every 10 seconds (10000 ms)
});
</script>

[BSS-TekLabs]

- Here is the solution for you @seiza123 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.tooltip-arrow {
    display: none !important;
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSSCommerce-B2B · Accepted solution]

@seiza123 , remove this in your custom code

Result:

[Rahul_dhiman]

Hello @seiza123 
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

.tooltip-arrow:empty {
display: none !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[pawankumar]

Hi @seiza123 
Update style tag to this

<style>
.tooltip-wrapper {
position: relative;
margin-top: 19px;
display: flex;
padding: 16px;
gap: 8px;
background: #ECFBFF;
color: black;
}

.tooltip-arrow:empty {
display: none;
}

.tooltip-arrow {
position: absolute;
height: 16px;
width: 16px;
background: #ECFBFF;
top: -8px;
left: 48px;
transform: rotateY(0deg) rotate(45deg);
}

.pulse-icon span {
position: relative;
display: flex;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #54DEFC;
animation: pulse 2s ease 0s infinite normal none;
margin: 10px;
}

.pulse-icon span::after {
content: "";
width: 16px;
height: 16px;
border: 1px solid #334FB4;
border-radius: 50%;
position: absolute;
left: -3px;
top: -3px;
}

.tooltip-content {
margin: auto;
font-size: 12px;
margin-left: 0px;
}
@keyframes pulse {
0% {
transform: scale(0.95);
opacity: 1;
}
70% {
transform: scale(1.5);
opacity: 0;
}
100% {
transform: scale(0.95);
opacity: 0;
}
}

.container-krismotion {
display: flex;
flex-direction: row;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Thanks!