012 - Tooltip

012-tooltip.markdown

012 - Tooltip

This pen is part of my 100 Days CSS Challenge, view all pens under http://100dayscss.com

A Pen by Matthias Martin on CodePen.

License.

index.html

<div class="frame">
  <div class="quote">
		<p>I know quite certainly that I myself have no special talent; curiosity, 
			<span onclick="void(0);" class="tooltip">obsession
				<span class="info">
					<span class="pronounce">[əbˈseʃ(ə)n]<span class="fa fa-volume-up"></span></span>
					<span class="text"><b>Obsession</b>, a persistent disturbing preoccupation with an often unreasonable idea or feeling.</span>
				</span>
			</span> and dogged endurance, combined with self-criticism have brought me to my ideas.</p>
		<p class="author">Albert Einstein</p>
	</div>
</div>

style.scss

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300,300italic);

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
  background: #4CB6DE;
  color: #fff;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.quote {
	position: relative;
	margin-top: 90px;
	padding: 0 30px;
	
	&:before {
		display: block;
		position: absolute;
		z-index: 0;
		content: '„';
		font-family: Arial;
		font-size: 250px;
		color: #6AC2E3;
		line-height: 35px;
		top: -100px;
		left: 7px;
	}
	
	p {
		position: relative;
		z-index: 1;
		font-size: 24px;
		line-height: 35px;
		margin: 20px 0;
	}
	
	.author {
		font-weight: 300;
		font-style: italic;
		font-size: 20px;
		line-height: 28px;
	}
	
	.tooltip {
		position: relative;
		display: inline-block;
		background: #286F8A;
		padding: 0px 8px 5px 8px;
		margin: -10px 0;
		cursor: pointer;
		
		&:hover .info,
		&:focus .info {
			visibility: visible;
			opacity: 1;
			transform: translate3d(0,0,0);
		}
		
		.info {
			box-sizing: border-box;
			position: absolute;
			bottom: 53px;
			left: -85px;
			display: block;
			background: #286F8A;
			width: 300px;
			font-size: 16px;
			line-height: 24px;
			cursor: text;
			visibility: hidden;
			opacity: 0;
			transform: translate3d(0,-20px,0);
			transition: all .5s ease-out;
			
			&:before {
				position: absolute;
				content: '';
				width: 100%;
				height: 14px;
				bottom: -14px;
				left: 0;
			}
						
			&:after {
				position: absolute;
				content: '';
				width: 10px;
				height: 10px;
				transform: rotate(45deg);
				bottom: -5px;
				left: 50%;
				margin-left: -5px;
				background: #286F8A;
			}
			
			.pronounce {
				display: block;
				background: #fff;
				color: #286F8A;
				padding: 8px 17px 10px 17px;
				line-height: 16px;
				
				.fa {
					position: relative;
					margin-left: 10px;
					top: 1px;
					cursor: pointer;
					transition: all .2s ease-out;
					
					&:hover {
						transform: scale(1.15) translate3d(0,0,0);
						backface-visibility: none;
					}
				}
			}
			
			.text {
				display: block;
				padding: 13px 17px;
			}
		}
	}
	
}