JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="dog">
  <ul class="dog__phrases">
    <li class="dog__phrase">Текст1</li>
    <li class="dog__phrase">Текст2</li>
	<li class="dog__phrase">Объёмный новый текст3</li>
	<li class="dog__phrase">Большой новый текст4</li>
	<li class="dog__phrase">Внушительный новый текст5</li>
  </ul>

  <img class="dog__image" src="https://cdn-wglc.gcdn.co/uploads/public/layouts/2019_03_27__18_34_39_wot_classic/content/dog.png" alt="Собачка">
</div>
</body>

CSS

body{
  background: #333;
}
.dog {
  position: fixed;
  overflow: hidden;
  bottom: 0px;
  left: 20px;
}

.dog__image {
  margin-bottom: -20px;
  transition: 0.3s;
}

.dog__phrases {
  list-style: none;
  margin: 0px;
  margin-left: 100px;
  padding: 0px;
  text-align: center;
}

.dog__phrase {
  display: none;
}

.dog__phrase--visible {
  display: block;
}

.dog__phrase {
  width: 100px;
  height: 50px;
	position: relative;
	background: #ffffff;
	border-radius: 50%;
  color: #000;
  font-size: 20px;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}

.dog__phrase:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: #ffffff;
	border-bottom: 0;
	border-left: 0;
	margin-left: -30px;
	margin-bottom: -5px;
}

JavaScript

var phrases = document.querySelectorAll('.dog__phrase');
  var dog = document.querySelector('.dog__image');

  dog.addEventListener('mouseenter', function () {
    phrases.forEach(p => p.classList.remove('dog__phrase--visible'));

    var phrase = phrases[Math.floor(Math.random() * phrases.length)];
    phrase.classList.add('dog__phrase--visible');

    this.setAttribute('style', 'margin-bottom: 0px;');
  });

  dog.addEventListener('mouseleave', function () {
    phrases.forEach(p => p.classList.remove('dog__phrase--visible'));
    this.setAttribute('style', 'margin-bottom: -20px;');
  });