A pure CSS tooltip library for your lovely websites

gravatar
CSS 2/3, Hint.css
Snippet by Anon
929 0
HTML
<div class="section  section--inverted">
			<h2>Hint.css</h2>

				<div class="window">
					<div class="titlebar">
						<div class="buttons">
							<a class="titlebar__btn  close  hint--bottom-right" aria-label="Close"></a>
							<a class="titlebar__btn  minimize  hint--bottom-right" aria-label="Minimize"></a>
							<a class="titlebar__btn  zoom  hint--bottom-right" aria-label="Zoom"></a>
						</div>
						Try hovering over different things
					</div>
					<div class="content">
						<div class="position-grid">
							<div class="position-grid__cell"><a href="#" aria-label="bottom-right" class="hint--bottom-right">bottom-right</a></div>
							<div class="position-grid__cell"><a href="#" aria-label="bottom" class="hint--bottom">bottom</a></div>
							<div class="position-grid__cell"><a href="#" aria-label="bottom-left" class="hint--bottom-left">bottom-left</a></div>
							<div class="position-grid__cell"><a href="#" aria-label="right" class="hint--right">right</a></div>
							<div class="position-grid__cell"><a>.</a></div>
							<div class="position-grid__cell"><a href="#" aria-label="left" class="hint--left">left</a></div>
							<div class="position-grid__cell"><a href="#" aria-label="top-right" class="hint--top-right">top-right</a></div>
							<div class="position-grid__cell"><a href="#" aria-label="top" class="hint--top">top</a></div>
							<div class="position-grid__cell"><a href="#" aria-label="top-left" class="hint--top-left">top-left</a></div>
						</div>

						<h3>Color Modifiers</h3>
						<p>
							<a class="status-icon  hint--bottom-right  hint--error" style="background:indianred" aria-label="This is an error tooltip">
								<svg style="width:24px;height:24px" viewBox="0 0 24 24">
										<path fill="#ffffff" d="M8.27,3L3,8.27V15.73L8.27,21H15.73L21,15.73V8.27L15.73,3M8.41,7L12,10.59L15.59,7L17,8.41L13.41,12L17,15.59L15.59,17L12,13.41L8.41,17L7,15.59L10.59,12L7,8.41" />
								</svg>
							</a>
							<a class="status-icon  hint--bottom-right  hint--warning" style="background:orange" aria-label="This is a warning tooltip">
								<svg style="width:24px;height:24px" viewBox="0 0 24 24">
										<path fill="#ffffff" d="M11,4.5H13V15.5H11V4.5M13,17.5V19.5H11V17.5H13Z" />
								</svg>
							</a>
							<a class="status-icon  hint--bottom-left  hint--info" style="background:lightblue" aria-label="This is an info tooltip">
								<svg style="width:24px;height:24px" viewBox="0 0 24 24">
										<path fill="#ffffff" d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z" />
								</svg>
							</a>
							<a class="status-icon  hint--bottom-right  hint--success" style="background:lightgreen" aria-label="This is success tooltip">
								<svg style="width:24px;height:24px" viewBox="0 0 24 24">
									<path fill="#ffffff" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
								</svg>
							</a>
						</p>

						<h3>Size variations</h3>

						<p>
							<a class="hint--top  hint--small" style="border: 1px solid #eee;padding:3px 6px;border-radius:4px;" data-hint="You can show very very long sentences inside tooltips by using various available size variation classes.">
								Small
							</a>

							<a class="hint--top  hint--medium" style="border: 1px solid #eee;padding:3px 6px;border-radius:4px;" data-hint="You can show very very long sentences inside tooltips by using various available size variation classes.">
								Medium
							</a>

							<a class="hint--top  hint--large" style="border: 1px solid #eee;padding:3px 6px;border-radius:4px;" data-hint="You can show very very long sentences inside tooltips by using various available size variation classes.">
								Large
							</a>
						</p>


						<h3>Extra</h3>

						<p>
							<a class="hint--left  hint--always" aria-label="...which always keep showing">You can also make tooltips...</a>
						</p>

						<p>
							<a class="hint--top  hint--rounded" aria-label="We have rounded corners for you">Hmm...So you don't like sharp edges?</a>
						</p>

						<h3>Effects</h3>

						<p>
							<a class="hint--top  hint--no-animate" aria-label="Get a simple show/hide tooltip">Dont like animation?</a>
						</p>
						<p>
							<a class="hint--right  hint--bounce" aria-label="Bounce">Adding a <code>hint--bounce</code> class gives you that...</a>
						</p>
					</div>
				</div>
		</div>
CSS
body { text-align: center; font-family: Arial; background: #D9623F; min-height: 100vh; font-size: 18px; padding: 0; margin: 0; color: white; } h1 { font-size: 6em; text-shadow: 0 6px 1px rgba(0, 0, 0, 0.2); font-family: 'Lobster', cursive; } h2 { font-size: 4em; margin: 0.5em 0; text-shadow: 0 6px 1px rgba(0, 0, 0, 0.2); font-family: 'Lobster', cursive; } .section { position: relative; } .section:after { content: ''; position: absolute; bottom: -25px; background: inherit; left: -4px; height: 50px; right: -2px; z-index: 1; transform: rotate(2deg); } .section:last-of-type { padding-bottom: 2em; } .section:last-of-type:after { display: none; } .section--inverted:after { left: -4px; height: 50px; right: -2px; z-index: 1; transform: rotate(-2deg); } .section:nth-child(2) { background: #9993C1; background: #8BBA66; background: #5BC0EB; background: } .section:nth-child(3) { background: #D9623F; background: #E4CC37; /* #BD3769 */ /* #E18335 */ } .section:nth-child(4) { background: #7D6EC6; } .section:nth-child(5) { background: #D9623F; /*background: ##E18335;*/ /* #BD3769 */ /* #E18335 */ } .section-inner { max-width: 600px; margin: 0 auto; } h1, h3 { margin: 5px 0; } a { color: #1A5A7A; color: #fff; outline: none; text-decoration: none; } .btn { background: white; padding: 20px; display: inline-block; border-radius: 8px; text-transform: uppercase; transition: 0.3s ease; } .btn:hover { transform: scale(1.2); } .download-btn { color: #7D6EC6; margin-top: 1em; } .position-grid { display: flex; flex-wrap: wrap; } .position-grid__cell { flex: 1 33.33%; font-size: 0.8em; } .position-grid__cell a { display: inline-block; width: 90%; background: rgba(91, 192, 235, 0.37); color: white; margin: 2px 0; padding: 16px 5px; } .status-icon { background: indianred; fill: white; border-radius: 3px; padding: 5px 6px 2px; margin: 0 4px; border: 1px solid rgba(0, 0, 0, 0.2); } .features ul { padding: 0; list-style: none; } .footer { color: rgba(255, 255, 255, 0.7); } .window { background: #fff; width: 50vw; min-width: 450px; margin: auto; border: 1px solid #acacac; border-radius: 6px; box-shadow: 0px 6px 17px rgba(0, 0, 0, 0.2); cursor: default; } .titlebar { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ebebeb, color-stop(1, #d5d5d5))); background: -webkit-linear-gradient(top, #ebebeb, #d5d5d5); background: -moz-linear-gradient(top, #ebebeb, #d5d5d5); background: -ms-linear-gradient(top, #ebebeb, #d5d5d5); background: -o-linear-gradient(top, #ebebeb, #d5d5d5); background: linear-gradient(top, #ebebeb, #d5d5d5); color: #4d494d; font-size: 11pt; line-height: 20px; text-align: center; width: 100%; height: 20px; border-top: 1px solid #f3f1f3; border-bottom: 1px solid #b1aeb1; border-top-left-radius: 6px; border-top-right-radius: 6px; } .buttons { padding-left: 8px; padding-top: 3px; float: left; line-height: 0px; } .titlebar__btn { font-size: 9pt; line-height: 11px; width: 11px; height: 11px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 50%; display: inline-block; margin-right: 5px; cursor: pointer; } .close { background: #ff5c5c; } .minimize { background: #ffbd4c; } .zoom { background: #00ca56; } .titlebar__btn:hover { border-color: rgba(0, 0, 0, 0.3); } .content { padding: 50px 10px; color: #777; } .content a { color: #444; } .content h3 { text-transform: uppercase; font-size: 0.8em; margin: 22px 0 0; padding: 4px 0; background: rgba(00, 0, 0, 0.02); color: rgba(0, 0, 0, 0.9); border-bottom: 1px solid rgba(0, 0, 0, 0.04); } a svg { fill: rgba(255, 255, 255, 0.6); } a:hover svg { fill: white; }
{ } JS

            
Preview