Максим Коновалов
Профи
(600)
1 год назад
Привет! Я рад помочь с вопросами по CSS.
Чтобы всплывающие окна не налаживались друг на друга, вы можете использовать свойство position с значением absolute и указывать разные значения для свойств top и left для каждого окна. Например, если вы хотите, чтобы окна располагались горизонтально, можно использовать разные значения top для каждого окна. Таким образом, окна не будут перекрывать друг друга.
Чтобы HTML-форматирование работало внутри всплывающих окон, вам нужно использовать свойство white-space со значением pre для спана, содержащего текст всплывающего окна. Например, вы можете добавить следующее свойство к классу .tooltip span:
Копировать
.tooltip span {
white-space: pre;
}
Теперь HTML-теги внутри всплывающего окна будут обрабатываться и отображаться в соответствии с их семантикой.
Надеюсь, эти советы помогут вам достичь желаемого результата! Если у вас возникнут ещё вопросы, не стесняйтесь обращаться.
Продолжай
Ещё
Вася БМастер (1954)
1 год назад
МЕГАГАЛАКТИЧЕСКОЕ ОГРОМНОЕ ЧЕЛОВЕЧЕСКОЕ СПАСИБО!!!!!
Не ожидал что так быстро получу толковый ответ точно по делу!
СПАСИБО!
Абылайхан Масымхан
Профи
(789)
1 год назад
я думал ты про Counter Strike:Source.
Возможно ли это?
-Да
я не айтишник,но обычно в таких случаях я менял место появления окна,ты хочешь паралленьно друг друга,используя тэyг для местоположения поставь одно окно допустим на x,y.z а в другом окне в поменяй значения z
Нарыл скрипт всплывающего меню.
Все ОК.
Теперь хочу что всплывающие окна не налаживались друг на друга, а как то параллельно друг к другу вставали. Возможно ли это?
И второй вопрос, а точнее прошу готового ответа ибо подсказки мне врят ли помогут: как дописать чтобы ХТМЛ форматирование сработало во всплывающем окне...
СПАСИБО!
ПРИМЕР:
<style>
[data-title]:hover:after {opacity: 1; transition: all 0.2s ease 0.6s; visibility: visible;}
[data-title]:after { content: attr(data-title); position: absolute; padding: 4px 8px 4px 8px; color: #222; border-radius: 5px; box-shadow: 0px 0px 15px #222;
background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc); background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc); background-image: -o-linear-gradient(top, #f8f8f8, #cccccc); visibility: hidden;
}
.tooltip span { position: absolute; margin-left: -30000px; } /* прячем далеко за краем экрана */
.tooltip:hover span { margin-left: 0; } /* Возвращаем из далекого заэкранного края блок на место */
.tooltip span{ background-color: #fff; color: black; padding:10px; border-radius: 10px; box-shadow: 0 0 0 3px green;}
</style>
<span data-title='Они по духу одинаковы'><font color='green'> [ <span data-title='Кот Том так же как и Ну Погоди <br/> все время гонится за персонажем поменьше'><font color='green'> [ Кот Том ] </font></span> и <span data-title='Волк это почти пес но не пес'><font color='green'> [ волк ] </font></span> Ну Погоди ] </font></span>