Menu wysuwane tacki z nazwą

pytanie zadane 24 listopada 2016 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)
edycja 24 listopada 2016 przez ShadoWs

Witam. Mam takie menu

Chciałbym zrobić żeby po kliknięciu np w lupkę wysuwała się taka tacka z napisem szukaj. Jest jakiś poradnik albo by mnie ktoś nakierował jak to ugryźć (zrobić). Na szybko zrobiłem o co mi chodzi

Taki mam kod i z góry dziękuję za wszelaką pomoc :)

.nav-shadow {
				position: fixed;
				overflow: hidden;
				top: 0;
				left: 0;
				height: 100%;
				list-style-type: none;
				margin: 0;
				padding: 0;
				background: #f7f7f7;
			}

			.nav-shadow li a {
				display: block;
				text-indent: -500em;
				height: 5em;
				width: 5em;
				line-height: 5em;
				text-align: center;
				color: #999;
				position: relative;
				border-bottom: 1px solid rgba(0,0,0,0.05);
				-webkit-transition: background 0.1s ease-in-out;
				-moz-transition: background 0.1s ease-in-out;
				transition: background 0.1s ease-in-out;
			}

			.nav-shadow li a:hover,
			.nav-shadow li:first-child a{
				background-color: blueviolet;
				color: #fff;
			}

			/* class for current item */
			.nav-shadow li.cbp-vicurrent a {
				background: #fff;
				color: blueviolet;
			}

			.nav-shadow li a:before {
				font-family: 'ecoico';
				speak: none;
				font-style: normal;
				font-weight: normal;
				text-indent: 0em;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-size: 1.4em;
				-webkit-font-smoothing: antialiased;
			}

			.nav-shadow li a.icon-logo:before {
				content: "S";
				font-weight: 700;
				font-size: 300%;
				font-family: 'Lato', Calibri, Arial, sans-serif;
			}

			.icon-search:before {
				content: "\e004";
			}

			.icon-archive:before {
				content: "\e005";
			}

			.icon-download:before {
				content: "\e006";
			}

			.icon-location:before {
				content: "\e007";
			}

			.icon-images:before {
				content: "\e009";
			}

			.icon-pencil:before {
				content: "\e008";
			}

			/* Example for media query (depends on total height of menu) */
			@media screen and (max-height: 34.9375em) { 

				.nav-shadow {
					font-size: 70%;
				}

			}

<ul class="nav-shadow">
			<li><a href="#" class="icon-logo">Logo</a></li>
			<li><a href="test.html" class="icon-archive">Archive</a></li>
			<li><a href="#" class="icon-search">Search</a></li>
			<li class="cbp-vicurrent"><a href="#" class="icon-pencil">Pencil</a></li>
			<li><a href="#" class="icon-location">Location</a></li>
			<li><a href="#" class="icon-images">Images</a></li>
			<li><a href="#" class="icon-download">Download</a></li>
		</ul>