JSFiddle - React, Tailwind, and code Playground

by laszlooo

HTML

<div class="row">
<div class="link_frame">
  <a href="#" onclick="result false;">link
        <div class="tooltip">
          <div class="tooltip_content">
            <span>szöveg</span>
          </div>
        </div>
      </a>
  <a href="">link
        <div class="tooltip">
          <div class="tooltip_content">
            <span>szöveg jön ide</span>
          </div>
        </div>
      </a>
  <a href="">link
        <div class="tooltip">
          <div class="tooltip_content">
            <span>szöveg jön ide is, szöveg jön ide is</span>
          </div>
        </div>
      </a>
       <a href="">link
        <div class="tooltip">
          <div class="tooltip_content">
            <span>szöveg jön ide is, szöveg jön ide is, szöveg jön ide is szöveg jön ide is</span>
          </div>
        </div>
      </a>
      <a data-title="itt vagyok ismét">itt</a>
</div>
</div>

<br><hr>
<div class="polygon" class="">Szöveg jön ide.</div>
<div class="polygon" class="">Szöveg jön ide.<br>Szöveg.</div>
<div class="polygon" class="">Szöveg jön ide.<br>Szöveg.<br>És szöveg jön ide is.</div>
<div class="polygon" class="">Szöveg jön ide.<br>Szöveg.<br>És szöveg jön ide is.<br>És még hosszabb szöveg jön ide is.</div>

CSS

.row { margin:150px 100px; }
.link_frame { padding:0px 20px; }
a { position:relative; margin:0px 50px; }
.tooltip { 
       -webkit-clip-path: polygon(86% 13%,90% 36%,55% 33%,60% 44%,6% 28%,12% 11%);
    clip-path: polygon(86% 15%,90% 55%,55% 55%,60% 72%,5% 47%,12% 15%);
    position: absolute;
    bottom: 100%;
    min-width: 200px;
    height: auto;
    left: -50%;
    transform: translate(-50%, 0%);
    display: none;
    background: linear-gradient(to bottom,#9a1419 1%,#c0181f 100%);
    background-size: 100% 100%;
    white-space: nowrap;
}
.tooltip .tooltip_content { 
    display: -webkit-box;
    width: 100%;
    position: relative; 
}
a:hover>.tooltip { display:block; }
span {
      position: relative;
    padding: 20px 45px 50px 35px;
    vertical-align: middle;
    display: inherit;
    color: white;
    text-align: center;
}

[data-title]:hover::before {
	content: attr(data-title);
	position: absolute;
	left: 0%;
	top: -70px;
	-webkit-clip-path: polygon(86% 13%,90% 36%,55% 33%,60% 44%,6% 28%,12% 11%);
	clip-path: polygon(86% 13%,90% 36%,55% 33%,60% 44%,6% 28%,12% 11%);
	display: inline-block;
	padding: 25px 35px 105px;
	border-radius: 5px;
	z-index: 9999;
	background: linear-gradient(to bottom,#9a1419 1%,#c0181f 100%);
	font-size: 12px;
	font-family: sans-serif;
	white-space: nowrap;
}



.polygon { display:inline-block;background-color:red;text-align:center;
vertical-align:middle;padding:1% 1% 3% 1%;margin-top:2%;margin-bottom:2%;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
white-space: nowrap;
}