JSFiddle - React, Tailwind, and code Playground

by laszlooo

HTML

<div class="row">
  <div class="link_frame">
    <a href="">link
				<div class="tooltip">
					<div style="display: inline-block;">
						<span>szöveg</span>
					</div>
				</div>
			</a>
    <a href="">link
				<div class="tooltip">
					<div style="display: inline-block;">
						<span>szöveg jön ide</span>
					</div>
				</div>
			</a>
    <a href="">link
				<div class="tooltip">
					<div style="display: inline-block;">
						<span>szöveg jön ide, szöveg jön ide</span>
					</div>
				</div>
			</a>
  </div>
</div>

CSS

.row {
  margin: 150px 100px;
}

.link_frame {
  padding: 0px 20px;
}

a {
  position: relative;
  margin: 0px 50px;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  width: max-content;
  left: 0px;
  display: none;
  background-image: url('https://i.imgur.com/HIOq0dv.png');
  background-size: cover;
}

a:hover>.tooltip {
  display: block;
}

span {
  position: relative;
  padding: 20px;
  vertical-align: middle;
  display: inherit;
}