JSFiddle - React, Tailwind, and code Playground

HTML

<ul>	
    <li><a href="">Icon <span>Unterhaltungen</span></a></li>
    <li><a href="">Icon <span>Apps</span></a></li>
    <li><a href="">Icon <span>Mehr</span></a></li>
    <li><a href="">Icon <span>Einstellungen</span></a></li>
</ul>

CSS

* {
    position: relative;
}
		ul {
			margin: 0;
			display: flex;
        }
			li {
				list-style: none;
            }
                a {
					display: block;
					text-decoration: none;
					color: blue;
					padding: 20px;
					white-space: nowrap;
                }
					span {
						position: absolute; 
						right: 0;
						bottom: -24px;
						background: rgba(0, 0, 0, 0.7);
						color: #fff;
						padding: 5px 10px;
						border-radius: 2px;
						display: none;
						font-size: 13px;
                    }
						span:after {
							bottom: 100%;
							left: 50%;
							border: solid transparent;
							content: " ";
							height: 0;
							width: 0;
							position: absolute;
							pointer-events: none;
							border-color: rgba(0, 0, 0, 0);
							border-bottom-color: rgba(0, 0, 0, 0.7);
							border-width: 8px;
							margin-left: -8px;
						}
					a:hover span {
						display: block;
					}