Всплывающая подсказка для Блоггер
Выглядит подсказка, в виде круга с восклицательным знаком, при наведении на него курсора, появляется окошко с текстом-пояснением.
Код подсказки
Вставляем код в шаблон блога, выше тега ]]></b:skin>.
.bsd-tooltip{position:absolute;top:16px;right:16px;text-align:center;background-color:#ff4400;border-radius:50%;width:24px;height:24px;font-size:12px;line-height:26px;cursor:default;transition:all 0.5s cubic-bezier(0.55,0,0.1,1)}
.bsd-tooltip:hover{cursor:pointer;background-color:#666}
.bsd-tooltip:before{content:'!';font-weight:900;color:#fff}
.bsd-tooltip p{visibility:hidden;opacity:0;text-align:left;background-color:#ff4400;padding:20px;width:300px;position:absolute;border-radius:6px;right:-6px;color:#fff;font-size:12px;line-height:normal;transform:scale(0.7);transform-origin:100% 0%;transition:all 0.5s cubic-bezier(0.55,0,0.1,1)}
.bsd-tooltip:hover p{cursor:default;visibility:visible;opacity:1;transform:scale(1.0)}
.bsd-tooltip p:before{position:absolute;content:'';width:0;height:0;border:6px solid transparent;border-bottom-color:#ff4400;right:10px;top:-12px}
.bsd-tooltip p:after{width:100%;height:40px;content:'';position:absolute;top:-5px;left:0}
.bsd-tooltip a{color:#fff;font-weight:700}
.bsd-tooltip a:hover,.bsd-tooltip a:focus{color:#fff;text-decoration:underline}
Поменять в коде можно:
Цвет кнопки и всплывающего окна — выделила в коде красным.
Чтобы кнопка-подсказка появилась в статье, в редакторе блога, в режиме html в нужном месте добавьте код:
<div class="bsd-tooltip"><p>Здесь будет ваша информация.</p></div>
Работу виджета можно посмотреть на сайте codepen.io, на странице автора.
Комментарии со спамом удаляются.