0
Я использую CSS, чтобы создать всплывающую подсказку, 4 подсказки размещается последовательно, на содержании всплывающего 1 подсказкиКак скрыть всплывающую подсказку?
Следующий код помещается между Jsp файлом в Liferay появляется второй подсказки, каждый файл JSP имеет код подсказки в Это. Если я открою 1-ю всплывающую подсказку, во всплывающем содержимом первой подсказки появятся другие всплывающие подсказки,
Мне нужно показать всплывающее содержимое без каких-либо перерывов. Как мне это сделать?
Мой код
.help-tip {
position: absolute;
top: 34px;
right: 120px;
text-align: center;
background-color: #a3c2c2;
border-radius: 50%;
width: 14px;
height: 10px;
font-size: 10px;
line-height: 16px;
cursor: default;
}
.help-tip:before {
content: '?';
font-weight: normal;
font-size: 10px;
color: #fff;
}
.help-tip:hover p {
display: block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p {
/* The tooltip */
display: none;
text-align: center;
/*background-color: #a3c2c2;*/
padding: 5px;
width: 170px;
position: absolute;
border-radius: 6px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
right: -100px;
/*color: #000000;*/
font-size: 14px;
line-height: 1.4;
color: #000000;
background: #FBF5E6;
background: -webkit-linear-gradient(top, #FBF5E6, #FFFFFF);
background: linear-gradient(top, #FBF5E6, #FFFFFF);
border: 1px solid #CFB57C;
}
.help-tip p:before {
/* The pointer of the tooltip */
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #66ccff;
right: 100px;
top: -12px;
}
.help-tip p:after {
/* Prevents the tooltip from being hidden */
width: 100%;
height: 40px;
content: '';
position: absolute;
top: -40px;
left: 0;
}
/* CSS animation */
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
transform: scale(0.6);
}
100% {
opacity: 100%;
transform: scale(1);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100%;
}
}<div class="help-tip">
<p>This is the inline edit help tip!</p>
</div>
Из-за использования одного и того же кода для каждой подсказки каждая подсказка будет иметь свойство CSS, 'position: absolute;' и это может вызвать проблему. Попробуйте изменить все позиции '' '' '' '' –
спасибо Джошу .... его работа – dhilip
Примите мой ответ, так что если кто-то еще совершает поездку по той же проблеме, они могут легко увидеть ответ. –