[CSS/JavaScript] Div που εμφανίζεται ή εξαφανίζεται σαν tooltip + delay

[Crypton-R-]

Καλό θα ήταν να μας είχες δώσει αυτό το link από την αρχή.

Για να φτιάξει πρέπει να παίξεις με το z-index γενικά, έκανα δοκιμές και το εμφάνισα κανονικά.

Ψάξε το λίγο και googlare το z-index για να δεις τι ακριβώς κάνει.

[philos]

Ναι βασικά έπαιξα κι εγώ με το z-index και τα εμφάνισα, απλά επειδή αναφέρατε κι εσείς ότι τα συγκεκριμένα z-index που βάλατε είναι "σημαντικά", ανέβασα το παράδειγμά χωρίς να τα πειράξω.

 

Κάνοντας τα εξής:

.cardC -> αλλαγή z-index από -10 σε 1

div.cardB -> αλλαγή z-index από -5 σε 2

 

Έχω πετύχει αυτό. Σε θέμα layout είναι σχεδόν ok (αν και ανεβάζει το height του postbit), αλλά και το hover πάνω στο blackbox (= δεν θα πρέπει να χάνεται όταν ο κέρσορας είναι πάνω) δεν λειτουργεί όπως στο codepen (δλδ εξαφανίζεται).

 

Καταλαβαίνω ότι με το hover αλλάζει το width/height (debug/ dashed border) ώστε να μένει ανοιχτό και το blackbox, όπως δούλευε σωστά στο codepen, αλλά για κάποιο λόγο στο πραγματικό περιβάλλον, δεν δουλεύει. Λείπει μήπως κάποια τελευταία z-index αλλαγή;

[XPHSTOS_]

Πωπω... έγινε χαμός!
Ωραία σπαζοκεφαλιά.. και πολύ καλή η σκέψη με το position absolute και το z-index.

Στην ουσία κρατάμε κρυφό το cardB πίσω από το cardA οπότε δεν ενεργοποιείται ποτέ το hover σε αυτό.
Για να έχουμε absolute στο cardB θέλουμε relative στο γονικό element.
Οπότε τα έχω "τυλίξει" σε ένα div.wrapper (Δεν έχω βάλει relative γιατί στο παράδειγμα δεν χρειάζεται)

Έβαλα ένα position absolute στο cardB και το έκανα translateX(-100%) δηλαδή το συνολικό του μήκος! (Yay no Js required)
Επίσης το αρχικό του z-index είναι στο -1, δηλαδή πίσω από όλα τα υπόλοιπα elements.

Κατα το hover του cardA επαναφέρω το z-index στο 1 για να μένει ανοικτό όταν κάνουμε hover, γιαυτό το έχω και στο cardB:hover..

Οπότε Site: Voila


Γενικά έχετε σαν "βίβλο" αυτό το site Site: CSS Triggers
Δείχνει ποια properties που γίνονται animate προκαλούν repaint.layout calc και composite κατα την μεταβολή τους.

Τα left, top, right, bottom καθώς και τα width & height είναι από τα πιο βαριά animations που μπορούμε να κάνουμε και καλό είναι να τα αποφεύγουμε και να παίζουμε με transforms αν είναι δυνατό.
 
PS. Είδα και το τελικό αποτέλεσμα.
Τελικά αυτό που θέλουμε μοιάζει με tooltip λειτουργία.
Οπότε μπορεί να βοηθήσουν και αυτά:
Site: Balloon.css
Site: Simple Tooltip
Site: CSS Tooltip
Site: Super CSS Tooltip

[HighT3ch]

Δεν ξέρω αν βρήκες τη λύση, απλά επειδή έτυχε να δω το thread και μου άρεσε το concept το υλοποίησα με jquery. Αν δεν έχεις βρει λύση πες μου.

[philos]

Βασικά εγώ έχω κολλήσει στο πως να το εφαρμόσω στο κανονικό site μου

 

Έχω ανεβάσει εδώ το html (μιας που το πραγματικό - δυναμικό site είναι σε localhost).

 

Σε θέμα layout είναι σχεδόν ok (αν και ανεβάζει το height του postbit που δεν θα έπρεπε), αλλά και το hover πάνω στο blackbox (= δεν θα πρέπει να χάνεται όταν ο κέρσορας είναι πάνω) δεν λειτουργεί όπως στο codepen (δλδ εξαφανίζεται).

 

Αν θέλεις παρέθεσέ μας και την jquery λύση σου μήπως καταφέρω να την εφαρμόσω σωστά.

[HighT3ch]

Αυτό που σου δείχνω έχει ένα basic layout και styling και δουλεύει με css κλάσεις και όχι ids για να το εφαρμόσεις σε πολλαπλά items αλλά αν γνωρίζεις πέντε πράγματα καταλαβαίνεις κάνει. Μπορεί να γίνεται και διαφορετικά απλά αυτό μου ήρθε πρόχειρα. Αν κολλήσεις κάπου πες

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
.block {
	margin:10px;
}
.link {
	display:block;
	border:1px solid black;
	height:100px;
	line-height:100px;
	width:100px;
	text-align:center;
	vertical-align:middle;
}
.popup{
	display:none;
	position:absolute;
	width: 100px;
	height: 100px;
	background: gray;
	box-shadow:0 0 5px rgba(0,0,0,0.5);
	padding:5px;
}
</style>

<script>
var timeouts = [];
jQuery(function(){
	var link, popup, hideTimeout, hideDelay = 1000;
	$(".link").mouseover(function(event){
		clearTimeouts();
		if(popup!=undefined && $(this).not(link))
			popup.stop().hide("fast");
		link = $(this);
		popup = link.parent().children(".popup");
		popup.stop().css({ top: link.position().top, left: (link.position().left + link.width() + 10) }).show("fast");
		popup.mouseover(function(){
			clearTimeouts();
		}).mouseout(function(event){
			popup.hidePopup(hideDelay);
		});
		
	}).mouseout(function(event){
		popup.hidePopup(hideDelay);
	});
	
	function clearTimeouts(){
		for(var i = 0; i < timeouts.length; i++){
			clearTimeout(timeouts[i]);
		}
		//quick reset timer array
		timeouts = [];
	}
});

jQuery.fn.hidePopup = function(delay){
	popup = $(this);
	hideTimeout = setTimeout(function(){
		popup.stop().hide("fast");
	}, delay);
	timeouts.push( hideTimeout );
}
</script>

<div class="block"><a href=#" class="link">image 1</a><div style="display:none" class="popup">blah blah for image 1</div></div>
<div class="block"><a href=#" class="link">image 2</a><div style="display:none" class="popup">blah blah for image 2</div></div>
<div class="block"><a href=#" class="link">image 3</a><div style="display:none" class="popup">blah blah for image 3</div></div>