Formula:Indicium ostentum/style.css

@media screen {

	data.allocatio.ostenta {
		position: relative;
		overflow: visible;
		transition: 1s 0s ease background-color;
	}

	data.allocatio.ostenta:hover,
	data.allocatio.ostenta:focus {
		background-color: rgba(0, 127, 255, .13333);
		transition: .4s 0s ease background-color;
	}

	data.allocatio.ostenta:not(:focus) {
		cursor: help;
	}

	data.allocatio.ostenta::before,
	data.allocatio.ostenta::after {
		font-family: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		text-decoration: none;
		font-size: .675em;
	}

	data.allocatio.ostenta::after {
		content: "\1F50D";
		opacity: 1;
		vertical-align: top;
		padding: 0;
		margin: 0 .2em;
		transition: .375s .125s ease opacity;
		display: inline-block;
	}

	data.allocatio.ostenta::before {
		content: attr(value);
		box-sizing: border-box;
		display: block;
		position: absolute;
		left: .5em;
		bottom: 100%;
		visibility: hidden;
		opacity: 0;
		padding: 0;
		box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, .5);
		border-radius: 1em;
		max-width: 0;
		max-height: 0;
		word-break: keep-all;
		white-space: nowrap;
		overflow: auto;
		background-color: rgba(0, 0, 0, .9);
		color: #fff;
		text-align: center;
		transition:
			.125s 0s ease opacity,
			0s .125s linear max-height,
			0s .125s linear max-width,
			0s .125s linear padding,
			0s .125s linear visibility;
	}

	data.allocatio.ostenta:hover::before,
	data.allocatio.ostenta:focus::before {
		max-width: 24em;
		max-height: 7em;
		padding: .3em .9em;
		visibility: visible;
		opacity: 1;
		cursor: default;
		transition: .325s .1s ease opacity;
	}

	data.allocatio.ostenta:hover::after,
	data.allocatio.ostenta:focus::after {
		opacity: .25;
		transition: .1s 0s ease opacity;
	}

}