CSS всплывающая подсказка к тексту

 Подсказка часто используется для указания дополнительной информации о чем-либо, когда пользователь наводит указатель мыши на элемент

 Всплывающая подсказка , также известная как информационная подсказка или подсказка , представляет собой общий элемент графического пользовательского интерфейса (GUI), в котором при наведении курсора на элемент или компонент экрана в текстовом поле отображается информация об этом элементе, например описание функции кнопки, что означает аббревиатура или точная абсолютная отметка времени относительно относительного времени («… назад»).

Демонстрация

Единство стиля в дизайне подразумевает узнаваемость, а не скучный шаблонный вид для всех разделов, рубрик, страниц сайта. Узнаваемость выражается в стиле, деталях оформления и необходима для продвижения бренда, а набор отличных по дизайну страниц нельзя назвать стильным дизайном

HTML разметка подсказки

  
<span data-title="Подсказка">Текст</span> 
   

CSS оформление подсказки

 
   <style>       
   /* всплывающая подсказка к тексту start */     
   [data-title]{display:inline-block; text-indent:0px; border-radius: .8em; border:1px solid #bfbfbf; position:relative; padding:0 .2em; cursor:help;}     
   [data-title]:hover::after,[data-title]:focus::after{content:attr(data-title); font-size:1em; position: fixed;  bottom:40%; top: auto; left:0; right:0; z-index: 999; width:-moz-max-content;  width:-webkit-max-content;  width:max-content;   max-width:94vw;   max-height:80vh;  overflow:auto;  margin:0 auto; padding:.3rem; border-radius: .2rem; border: .05rem solid var(--font-d-color);  font-size:99%;  background:rgba(48,48,48,.9); line-height:normal; cursor:auto;  color:#fcfdfd; text-shadow:1px 1px 1px black,0 0 1px white;}     
   [data-title]:hover::before,[data-title]:focus::before{ content:'?'; color:#000000;}     
   [data-title]:before{content: '?'; color:#fff; background:rgba(199,199,199,.6); font-size:1em; padding:0 .3em; margin-right: .2em; border-radius: 50%; width:1em; height:1em;}     
   /* всплывающая подсказка к тексту end*/     
   </style>     
   

codepen