tooltips with html inside

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
tsirman
Δημοσιεύσεις: 145
Εγγραφή: 14 Νοέμ 2002 22:57
Επικοινωνία:

tooltips with html inside

Δημοσίευση από tsirman » 15 Οκτ 2007 18:31

Geia,

pos mporume na kanume ena tooltip pu mesa tu na min exei sketo text opos dixnun diafora css site sto net. prospatho na exo mesa links ke menus ke de vgazo akri :(

Άβαταρ μέλους
tsirman
Δημοσιεύσεις: 145
Εγγραφή: 14 Νοέμ 2002 22:57
Επικοινωνία:

tooltips with html inside

Δημοσίευση από tsirman » 15 Οκτ 2007 20:44

stin usia kati san to link pano dexia

http://msdn2.microsoft.com/en-us/library/aa139615.aspx

Άβαταρ μέλους
dik_
Δημοσιεύσεις: 476
Εγγραφή: 07 Ιουν 2007 11:28

tooltips with html inside

Δημοσίευση από dik_ » 15 Οκτ 2007 21:26

Δεν είναι ακριβώς tooltip αυτό.

Φτιάξε ένα div με display:none και βάλτου μέσα ότι θες. Μετά στο onclick ή onmouseover event του link, κάντο display:block.

Άβαταρ μέλους
The Razor
Δημοσιεύσεις: 1940
Εγγραφή: 10 Φεβ 2007 12:37
Επικοινωνία:

tooltips with html inside

Δημοσίευση από The Razor » 15 Οκτ 2007 21:31

To εξηγείς λίγο αναλυτικότερα γιατί με ενδιαφέρει και εμένα?

Άβαταρ μέλους
dik_
Δημοσιεύσεις: 476
Εγγραφή: 07 Ιουν 2007 11:28

tooltips with html inside

Δημοσίευση από dik_ » 15 Οκτ 2007 22:22

Κώδικας: Επιλογή όλων

<div><a href="#" onmouseover="document.getElementById&#40;'tooltip'&#41;.style.display='';" onmouseout="document.getElementById&#40;'tooltip'&#41;.style.display='none';">link</a></div>
<div id="tooltip" style="display&#58;none;border&#58;1px solid #000000;">
	<p><b>asdfasf</b></p>
	<p><a href="#">link</a></p>
	<p><img src="http&#58;//www.freestuff.gr/images/header/fs_logo.jpg"></p>
</div>

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

tooltips with html inside

Δημοσίευση από patriot » 16 Οκτ 2007 03:50

Ο κώδικας που έδωσε ο dik συμπεριλαμβάνει δυστυχώς Javascript (Js). Αν σε περίπτωση κάποιος έχει disabled την Js στον browser του τότε το κόλπο δεν θα πιάσει. Καλύτερο είναι ότι κάνετε, να το κάνετε με css μόνο ή άντε html. Ρίξτε μια ματιά στα μενού του http://www.cssplay.co.uk/.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
dik_
Δημοσιεύσεις: 476
Εγγραφή: 07 Ιουν 2007 11:28

tooltips with html inside

Δημοσίευση από dik_ » 16 Οκτ 2007 04:18

Τα requirements δεν απέκλειαν τη js. Δεκτό πάντως :)

Στο cssplay ποιό μενού ακριβώς εμφανίζει υπομενού;

edit: τώρα κατάλαβα ότι εννοούσες τα παραδείγματά τους, κι όχι το μενού του site per se :D Π.χ. αυτό.

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

tooltips with html inside

Δημοσίευση από patriot » 16 Οκτ 2007 22:29

Ξέρω ότι ήταν μέσα στα requirements η Js αλλά σκέφτηκα ότι ίσως ο tsirman να μην ήξερε ότι δεν χρειαζόταν. Συγνώμη αν ακούστηκε σαν να σε σνομπάρω. :oops:
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
dik_
Δημοσιεύσεις: 476
Εγγραφή: 07 Ιουν 2007 11:28

tooltips with html inside

Δημοσίευση από dik_ » 17 Οκτ 2007 00:56

Σώπα βρε...

Κουβέντα να γίνεται :D

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

tooltips with html inside

Δημοσίευση από skeftomilos » 17 Οκτ 2007 02:53

Προσωπικά δε μου αρέσουν αυτού του είδους τα tooltips μου αποσπούν την προσοχή όταν βλέπω μια σελίδα. Η χρήση JavaScript δεν αποτελεί μεγαλύτερο πρόβλημα από τη χρήση CSS, καθώς ο χρήστης μπορεί να απενεργοποιήσει το ένα, το άλλο, ή και τα δύο.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
dik_
Δημοσιεύσεις: 476
Εγγραφή: 07 Ιουν 2007 11:28

tooltips with html inside

Δημοσίευση από dik_ » 17 Οκτ 2007 04:19

Κι εγώ τα προτιμώ με onclick παρά με onmouseover.

Δεν τίθεται σύγκριση μεταξύ js και css security-wise, αλλά πώς απενεργοποιείς CSS;

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

tooltips with html inside

Δημοσίευση από skeftomilos » 17 Οκτ 2007 19:54

Firefox 1.5 -> View -> Page Style -> No Style :-)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
tsirman
Δημοσιεύσεις: 145
Εγγραφή: 14 Νοέμ 2002 22:57
Επικοινωνία:

tooltips with html inside

Δημοσίευση από tsirman » 17 Οκτ 2007 20:33

ok κάτι κατάφερα δείτε:

CSS

Κώδικας: Επιλογή όλων

<style type="text/css">
a.css_tooltip&#123;
	position&#58;relative;
	z-index&#58;1;
&#125;

a.css_tooltip span&#123;
	display&#58;none
&#125;

a.css_tooltip&#58;hover&#123;

	z-index&#58;25;
	
	/* IE requires a background color for some reason */
	background-color&#58;#ffffff;
&#125;

a.css_tooltip&#58;hover span&#123;
	width&#58; 280px;
	position&#58;absolute;
	cursor&#58;default;
	display&#58;inline;	
	/* Optional Styles */
	top&#58;5px;
	left&#58;-20em;
	padding&#58;5px;
	font-weight&#58;normal;
	color&#58;#000000;
	text-decoration&#58;none;
	border-style&#58;solid;
	border-width&#58;1px;
	background-color&#58;#fafafa;
&#125;
</style>
HTML

Κώδικας: Επιλογή όλων

<a class="css_tooltip" href="#">LinkName<span>ToolTip Content</span></a>
Όμως...όταν το ελέγχω σε Firefox και ΙΕ7 δυστυχώς ενώ το <span> εμφανίζεται δεν μπορώ βάζοντας μέσα στο <span> κάποιο table με links να το προσπελάσω και να το πατήσω και εξαφανίζεται. Έχω κάνει πατάτα;

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες