0 / 0 / 0
Регистрация: 14.01.2016
Сообщений: 44
|
|
1 | |
Во всплывающей подсказке код читается как обычный текст. Как сделать чтобы код считывался ?24.11.2018, 05:16. Показов 2297. Ответов 2
Метки нет (Все метки)
Есть у меня на сайте всплывающая подсказка, реализована на чистом CSS с помощью библиотеки (код библиотеки в спойлере)
Кликните здесь для просмотра всего текста
/*БИБЛИОТЕКА ДЛЯ ВСПЛЫВАЮЩИХ ПОДСКАЗОК*/
/*! Simple Hint v2.0 | Copyright (c) 2014 Catalin Covic | https://github.com/catc */ [simple-hint]:after, [simple-hint]:before { pointer-events: none; position: absolute; visibility: hidden; } [simple-hint]:hover:after, [simple-hint]:hover:before { visibility: visible; } [simple-hint]:before { content: ""; border: 5px solid transparent; z-index: 9998; } [simple-hint]:after { content: attr(simple-hint); text-align: center; border: 3px solid #386076; padding: 3px 7px; border-radius: 2px; z-index: 9999; color:#386076; font-weight: 600; white-space: nowrap; font-size: 1rem; line-height: 1.5em; background: #292929; } [class*="hint-bottom"]:before, [class*="hint-top"]:before { display:none; right: 50%; margin-right: -5px; } [class*="hint-bottom"]:after, [class*="hint-top"]:after { left: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } [class*="hint-bottom"]:before { border-bottom-color: #292929; top: 100%; } [class*="hint-bottom"]:after { margin-top: 10px; top: 100%; } [class*="hint-top"]:before { border-top-color: #292929; bottom: 100%; } [class*="hint-top"]:after { bottom: 100%; margin-bottom: 10px; } [class*="hint-left"]:before, [class*="hint-right"]:before { top: 50%; margin-top: -5px; } [class*="hint-left"]:after, [class*="hint-right"]:after { top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } [class*="hint-left"]:before { border-left-color: #292929; left: 0; margin-left: -10px; } [class*="hint-left"]:after { margin-right: 10px; } [class*="hint-right"]:before { border-right-color: #292929; right: 0; margin-right: -10px; } [class*="hint-right"]:after { left: 100%; margin-left: 10px; } .hint-persist:before, .hint-persist:after { visibility: visible; } @media only screen and (max-width: 768px) { [class*="hint-"][class*="-mobile"]:after, [class*="hint-"][class*="-mobile"]:before { display: none; } } [class*="hint-"][class*="-s-small"]:after { width: 110px; white-space: initial; } [class*="hint-"][class*="-s-med"]:after { width: 620px; white-space: initial; } [class*="hint-"][class*="-s-big"]:after { width: 450px; white-space: initial; } .hint-d-short:hover:after, .hint-d-short:hover:before { -webkit-transition: visibility 0s 0.5s ease; -moz-transition: visibility 0s 0.5s ease; transition: visibility 0s 0.5s ease; } .hint-d-med:hover:after, .hint-d-med:hover:before { -webkit-transition: visibility 0s 1s ease; -moz-transition: visibility 0s 1s ease; transition: visibility 0s 1s ease; } .hint-d-long:hover:after, .hint-d-long:hover:before { -webkit-transition: visibility 0s 2s ease; -moz-transition: visibility 0s 2s ease; transition: visibility 0s 2s ease; } [class*="hint-fade"]:before, [class*="hint-fade"]:after { -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; transition: opacity 0.5s ease; opacity: 0; } [class*="hint-fade"]:hover:before, [class*="hint-fade"]:hover:after { opacity: 1; } [class*="hint-fade"][class*="-d-short"]:hover:before, [class*="hint-fade"][class*="-d-short"]:hover:after { -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition-delay: 0.5s; } [class*="hint-fade"][class*="-d-med"]:hover:before, [class*="hint-fade"][class*="-d-med"]:hover:after { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; transition-delay: 1s; } [class*="hint-fade"][class*="-d-long"]:hover:before, [class*="hint-fade"][class*="-d-long"]:hover:after { -webkit-transition-delay: 2s; -moz-transition-delay: 2s; transition-delay: 2s; } @-webkit-keyframes top { from { bottom: 125%; opacity: 0; } } @-moz-keyframes top { from { bottom: 125%; opacity: 0; } } @keyframes top { from { bottom: 125%; opacity: 0; } } @-webkit-keyframes bottom { from { top: 125%; opacity: 0; } } @-moz-keyframes bottom { from { top: 125%; opacity: 0; } } @keyframes bottom { from { top: 125%; opacity: 0; } } @-webkit-keyframes right { from { margin-right: -35px; margin-left: 35px; opacity: 0; } } @-moz-keyframes right { from { margin-right: -35px; margin-left: 35px; opacity: 0; } } @keyframes right { from { margin-right: -35px; margin-left: 35px; opacity: 0; } } @-webkit-keyframes left { from { margin-left: -35px; margin-right: 35px; opacity: 0; } } @-moz-keyframes left { from { margin-left: -35px; margin-right: 35px; opacity: 0; } } @keyframes left { from { margin-left: -35px; margin-right: 35px; opacity: 0; } } [class*="hint-anim"]:after, [class*="hint-anim"]:before { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 0.3s; -moz-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; animation-timing-function: ease; } [class*="hint-anim"][class*="hint-top"]:hover:before, [class*="hint-anim"][class*="hint-top"]:hover:after { -webkit-animation-name: top; -moz-animation-name: top; animation-name: top; } [class*="hint-anim"][class*="hint-bottom"]:hover:before, [class*="hint-anim"][class*="hint-bottom"]:hover:after { -webkit-animation-name: bottom; -moz-animation-name: bottom; animation-name: bottom; } [class*="hint-anim"][class*="hint-left"]:hover:before, [class*="hint-anim"][class*="hint-left"]:hover:after { -webkit-animation-name: left; -moz-animation-name: left; animation-name: left; } [class*="hint-anim"][class*="hint-right"]:hover:before, [class*="hint-anim"][class*="hint-right"]:hover:after { -webkit-animation-name: right; -moz-animation-name: right; animation-name: right; } [class*="hint-anim"][class*="-d-short"]:before, [class*="hint-anim"][class*="-d-short"]:after { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s; } [class*="hint-anim"][class*="-d-med"]:before, [class*="hint-anim"][class*="-d-med"]:after { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; } [class*="hint-anim"][class*="-d-long"]:before, [class*="hint-anim"][class*="-d-long"]:after { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; } /*-------------------------ЦВЕТ ФОНА ПОДСКАЗКИ---------------------------*/ [class*="hint-"][class*="-t-info"][class*="hint-bottom"]:before { border-bottom-color: #386076; } [class*="hint-"][class*="-t-info"][class*="hint-top"]:before { border-top-color: #386076; } [class*="hint-"][class*="-t-info"][class*="hint-right"]:before { border-right-color: #386076; } [class*="hint-"][class*="-t-info"][class*="hint-left"]:before { border-left-color: #386076; } [class*="hint-"][class*="-t-info"]:after { background: #fff; } [class*="hint-"][class*="-t-success"][class*="hint-bottom"]:before { border-bottom-color: #83C510; } [class*="hint-"][class*="-t-success"][class*="hint-top"]:before { border-top-color: #83C510; } [class*="hint-"][class*="-t-success"][class*="hint-right"]:before { border-right-color: #83C510; } [class*="hint-"][class*="-t-success"][class*="hint-left"]:before { border-left-color: #83C510; } [class*="hint-"][class*="-t-success"]:after { background: #83C510; } [class*="hint-"][class*="-t-error"][class*="hint-bottom"]:before { border-bottom-color: #FF4C4C; } [class*="hint-"][class*="-t-error"][class*="hint-top"]:before { border-top-color: #FF4C4C; } [class*="hint-"][class*="-t-error"][class*="hint-right"]:before { border-right-color: #FF4C4C; } [class*="hint-"][class*="-t-error"][class*="hint-left"]:before { border-left-color: #FF4C4C; } [class*="hint-"][class*="-t-error"]:after { background: #FF4C4C; } [class*="hint-"][class*="-t-notice"][class*="hint-bottom"]:before { border-bottom-color: #FFAE00; } [class*="hint-"][class*="-t-notice"][class*="hint-top"]:before { border-top-color: #FFAE00; } [class*="hint-"][class*="-t-notice"][class*="hint-right"]:before { border-right-color: #FFAE00; } [class*="hint-"][class*="-t-notice"][class*="hint-left"]:before { border-left-color: #FFAE00; } [class*="hint-"][class*="-t-notice"]:after { background: #FFAE00; } Все хорошо за исключением того что текст внутри этой подсказки совершенно не поддается форматированию. Просто выводит как текст. Единственное что меня интересует это возможность переносить на новую строчку текст там где мне будет это нужно. Но вместо переноса текста на следующую строку я получаю только один пробел. Что можно сделать в этом случае?
0
|
24.11.2018, 05:16 | |
Ответы с готовыми решениями:
2
Как сделать так, чтобы элемент массива считывался и умножался. Как изменить цвет текста во всплывающей подсказке в Делфи 7? Как сделать так чтобы считывался пробел и не выводились несколько раз повторенные символы Как записать код программы, чтобы часть запроса распознавало как переменную, а не как текст? |
Невнимательный
|
||||||||||||||||
24.11.2018, 05:57 | 2 | |||||||||||||||
Сообщение было отмечено danil7979 как решение
Решение
Добавлено через 9 минут
Добавлено через 5 минут Код
[TABLE][/TABLE]
1
|
0 / 0 / 0
Регистрация: 14.01.2016
Сообщений: 44
|
|
24.11.2018, 07:09 [ТС] | 3 |
Спасибо! Все заработало) Оказывается там уже стоял этот параметр но без important не работал
0
|
24.11.2018, 07:09 | |
24.11.2018, 07:09 | |
Помогаю со студенческими работами здесь
3
как сделать таблицу в исходнике, чтобы она выводилась на экран? вот код. нужно, чтобы в одной колонке был Х , Как сделать чтобы код понимал ту форму и ту Как сделать, чтобы код работал после условия if? Как сделать чтобы код открывался в новом окне? Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |