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: 110%;
	left: 130px;
	/*width: 250px;
	height: 130px;*/
	padding: 10px;
	opacity: 0;
	background: rgb(250, 250, 245);
	border: 1px solid rgb(220, 220, 220);;
	box-shadow: 2px 5px 25px 1px rgba(100, 110, 110, 0.2); 
	transition: opacity 0.4s;
	font-size: 14px;
}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
  margin: 10px 30px;
}

.lds-ripple div {
  position: absolute;
  border: 5px solid #000;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {

  animation-delay: -0.5s;

}

@keyframes lds-ripple {

  0% {

    top: 28px;

    left: 28px;

    width: 0;

    height: 0;

    opacity: 1;

  }

  100% {

    top: -1px;

    left: -1px;

    width: 58px;

    height: 58px;

    opacity: 0;

  }

}

dabblet.html

<div class="container"> 
	<span>Gökhan Aslan — &nbsp</span>
	<span id="company-title">Beymen</span>   
</div>

dabblet.js

document.getElementById('company-title').addEventListener('mouseover', function(){
	if(!this.parentElement.querySelector('#company-informations')){
		var card = document.createElement('DIV');
		var cardAtt = document.createAttribute('id');
		cardAtt.value = ('company-informations');
		card.setAttributeNode(cardAtt);
		
		card.innerHTML = '<div class="lds-ripple"><div></div><div></div></div>'
		this.parentElement.appendChild(card);
		setTimeout(function(){
			document.getElementById('company-informations').style.opacity= '1';
		}, 100);
		setTimeout(function(){
		card.innerHTML = '<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> ' ;
		}, 3000);
	}
});

document.getElementById('company-title').addEventListener('mouseout', function(){
	const card =  this.parentElement.querySelector('#company-informations');
	card.style.opacity= '0';
	
	setTimeout(function(){
		card.parentElement.removeChild(card);
		
	}, 400);
});

settings.json

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