.tooltip { display: inline; position: relative; z-index: 999; }

/* цвет текста для которого будет работать всплывающая подсказка */
.tooltip-item { position: relative; display: inline-block; font-weight: 700; z-index: 100; cursor: pointer; color: #0e5d27; -webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s; transition: background-color 0.3s, color 0.3s, transform 0.3s; }
	.tooltip:hover .tooltip-item { color: #ffffff; -webkit-transform: translate3d(0,-0.5em,0); transform: translate3d(0,-0.5em,0); }

/* блок текста с подсказкой */
.tooltip-content { position: absolute; z-index: 99; width: 360px; left: 50%; margin-left: -200px; bottom: -5px; text-align: left; background: #f4fff7; opacity: 0; font-size:14px; padding: 1.5em; color: #000000; border-bottom: 25px solid #023a03; border-top: 1px solid #023a03; border-left: 1px solid #023a03; border-right: 1px solid #023a03; cursor: default; pointer-events: none; border-radius: 5px; -webkit-transform: translate3d(0,-0.5em,0); transform: translate3d(0,-0.5em,0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; }

.tooltip-content a { color: #e2ffe9; }

.tooltip-text { opacity: 0; -webkit-transform: translate3d(0,1.5em,0); transform: translate3d(0,1.5em,0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; }

.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-text { pointer-events: auto; opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }