Как реализовать такие всплывашки?

Question

[Юрий Кучеренко]

Всем пример, задача показана на примере, при наведении подсказки всплывают, я не знаю как лучше их реализовать, или положить в блок и расположить там абсолютами, или скрывать и ровнять их, или бифор/абсолютами, если у кого есть свободная минутка, помогите. Спасибо, подготовил все ТУТ

Answer 1

[Greg Popov]

<div class="wrapper">
	<div class="circle_section">
		<div class="circle"><div class="popup"></div></div>
		<div class="circle"><div class="popup"></div></div>
		<div class="circle"><div class="popup"></div></div>
		<div class="circle"><div class="popup"></div></div>
		<div class="circle"><div class="popup"></div></div>
	</div>
</div>

* {
	margin: 0;
	padding: 0;
}

.wrapper {
	width: 1000px;
	margin: 0 auto;
	position: relative;
}

.popup {
	width: 250px;
	height: 150px;
	background-color: blue;
	display: inline-block;
	margin: 0px -50px;
	border: 2px solid red;
	position: absolute;
	display: none;
	left: 0;
	top: -170px
}

.circle {
	width: 100px;
	height: 100px;
	background-color: red;
	display: inline-block;
	border-radius: 50%;
	margin: 20px;
	position: relative;
}

$(function(){
	$('.circle').hover(function(){
		$(this).children('.popup').stop().show()
	},function(){
		$(this).children('.popup').stop().hide()
	})
});

Вместо тысячи слов.
На CodePen нет акка, лень создавать и разбираться.

Comments

[Юрий Кучеренко]

Совершенно не то что нужно

[Greg Popov]

Юрий Кучеренко: тю, так опишите задачу полнее. Если все на CSS, то дохлый номер, ибо так не делают всплывали, если конечно речь идет о кроссбраузерности.

[Юрий Кучеренко]

Greg Popov: Так я описал задачу, все на фото есть, понятно что на CSS это вообще шлак, на jquery можно, но то что ты написал и так понятно как сделать, тут проблема в расположении вплывающих окон, и соответственно правильной работы с помощью jquery

[Юрий Кучеренко]

Greg Popov: Не нужно расписывать по мелочам img вкладывать и все такое, я скинул топорную заготовку на пене, туда просто нужно всунуть jquery и правильно подогнать вспывашки

[Greg Popov]

Юрий Кучеренко:
Ну...
Во-первых: мы не переходили на «ты».

Во-вторых: если уже на ты, то смотри:
«тут проблема в расположении вплывающих окон»

Ты просто берешь $('.elem').innerHeight() $('.elem').innerWidth()
и абсолютному блоку даешь зазор на их размер, и то, если они динамически в размерах, что навряд-ли.

Соответсвенно просто top: (-num) и left:0, где num подбираешь по высоте блока + зазор по замыслу UI.

P.S. Разжевывал потому, что обычно такие вопросы задают ребята, которые с вордпрессом знакомы месяц, а с web два - три

[Юрий Кучеренко]

Greg Popov: та ладно, бросай формальности, тебе ведь не 50 лет. Чутка поправил твой код и все получилось, с $('.elem').innerHeight() $('.elem').innerWidth() и до этого был знаком, тот код что ты закинул сверху помог, была проблема не столько с jquery сколько с позиционированием их. Не знал или в контейнер нужно отдельный делать, или бифор/афтер. Спасибо еще раз

[Greg Popov]

Юрий Кучеренко: Не за что) А за формальности сори, не в духе сегодня. Всегда рад помочь)

Answer 2

[Oaks]

C opacity и transition: all .2s;



вот что получилось за 5 мин. HTML and CSS
код не обдуман!

<div class="wrap">
			<div class="img-wrap">
				<img src="https://rvm.io/images/rvm-logo-all-happy.png"/>
				<div class="pop">
					<div class="pop-img">
						<img src="https://rvm.io/images/rvm-logo-all-happy.png"/>
						<h3>RVM</h3>
					</div>
					<div class="desc">
						<p>RVM is a command-line tool which allows you to easily install</p>	
					</div>
				</div>
			</div>
			<h2>Ruby on Rails</h2>
			
		</div>

.wrap {
		text-align: center;
		width: 150px;
		height: 150px;
		float: left;
		margin-right: 20px;
	}
	img {
		max-width: 100%;
	}
	.img-wrap {
		position: relative;
		width: 150px;
		height: 150px;
		border-radius: 100%;
		background-color: #efefef;
		text-align: center;
	}
	.wrap img {
		width: 100%;
		height: auto;
	}
	.pop {
		position: absolute;
		top: -210px;
		left: 0;
		width: 300px;
		height: 150px;
		display: none;
		background-color: #efefef;
		padding: 20px 10px;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	}
	.pop:after {
		content: ''; 
    		position: absolute;
    		left: 65px; 
		bottom: -20px;
	 	border: 10px solid transparent; 
		border-top: 10px solid #efefef;
	}
	.wrap:hover .pop {
		display: block;
		
	}
	.pop-img {
		width: 100px;
		height:100px;
		border-radius: 100%;
		background-color: #fff;
		float: left;
	}
	.desc {
		padding: 0 10px;
		float: left;
		width: 180px;
	}

Comments

[Юрий Кучеренко]

Также спасибо, но лучше на jquery без великов, + транзишн нужен а если делать через дисплей - блок на ховере то ничего не будет, можно с опасити но мне нужно вверху расстояние. Кстать, выкупил что ты под убунту сидишь?

[Oaks]

Юрий Кучеренко: именно в ubuntu) не понял про расстояние вверху...

[Юрий Кучеренко]

Oaks: если стоит опасити то элемент не пропадает а наверху остается и занимает место то есть расстояние

[Oaks]

Юрий Кучеренко: Верно) если не задан position: absolute; Залил новую фотку выше.

[Oaks]

Юрий Кучеренко: css быстрее чем js. если конечно тебе важна производительность.