JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

</head>
<body>
<div id="button" class="button">Button</div>
<div class="bubble">
Hello! I'm a hint message...
</div>
</body>
</html>

CSS

.bubble {
	position: fixed;
    top: 33.5vh;
    left: 3vw;
    max-width: 90vw;
    width: 90vw;
    z-index: 10000;

	background-color: #00000088;
	color: white;
	font-size: 2.3vh;
	padding: 2vh 2vw;
	border-radius: 2vh;
    box-shadow:	0 1vh 1vw rgba(0, 0, 0, .3), 0 0.1vh 0.2vw rgba(0, 0, 0, .2);

    display: flex;
    align-content: center;

    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: bounce;
    animation-timing-function: ease;
}
.bubble.downwards::after {
	content: '';
	position: absolute;
	width: 0;
	height: 3vh;
	bottom: -9vh;
	border-top: none;
	left: 40vw;
	border: 3vh solid transparent;
    z-index: 10001;

	border-top-color: #00000066;
	filter: drop-shadow(0 1vh 1vw rgba(0, 0, 0, .3)), drop-shadow(0 0.1vh 0.2vw rgba(0, 0, 0, .2));
}
@keyframes bounce {
    0%   { margin-top: -0vh; }
    50%  { margin-top: -1vh; }
    100% { margin-top: 0vh; }
}
.button {
    border-radius: 0.5vh;
    background-color: #aaa;
}

#button {
  top: 20vh;
  width: 30vw;
  left: auto;
  right: auto;
}