Untitled

dabblet.css

import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
* {
   box-sizing: border-box;
   font-family: Roboto;
}  

.container{
	position: relative;
	margin: 30px;
	font-size: 25px;
	display: flex;
	align-items: center;
}

#company-title{
	color: gray;
	font-size: 0.7em;
	cursor: pointer;
}

#company-title:hover{
	color: rgb(100, 100, 100);	
	text-decoration: underline;
}

#company-informations{
	position: absolute;
	top: 130%;
	left: 120px;
	/*width: 250px;
	height: 130px;*/
	padding: 20px;
	opacity: 0;
	background: rgb(230, 235, 240);
	border: 1px solid rgb(220, 220, 220);;
	box-shadow: 2px 5px 25px 3px rgba(100, 100, 100, 0.2); 
	transition: opacity 0.4s;
	font-size: 15px;
}

dabblet.html

<div class="container"> 
	<span>Gökhan Aslan — &nbsp</span>
	<span id="company-title">Beymen</span>
	<div id="company-informations">
		<span> Çalışan Sayısı : </span> 
		<span> 1326 </span>
		<br/><br/>
		<span> Şirket Türü :</span>
		<span> Perakende </span>
		<br/><br/>
		<span> Yıllık Gelir : </span>
		<span> 1.000,000 TL </span>
	</div>
</div>

dabblet.js

document.getElementById('company-title').addEventListener('mouseover', function(){
	var card = document.getElementById('company-informations');
	card.style.opacity = '1';
});

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}