Een 'pop up' of 'tooltip, die altijd binnen de pagina blijft

[Drareg]

Ik wil een 'pop up' met uitsluitend tekst, als een soort voetnoot,, laten verschijnen wanneer iemand met een muis over een bepaald woord gaat, dat als 'link' functioneert, zonder dat die 'pop up' die 'link' overlapt. Omdat die dat woord geen vaste plaats heeft, de ene keer helemaal bovenaan en een andere keer helemaal onderaan, rechts of links, moet die 'pop up' zich dus telkens daaraan aanpassen om in beeld te komen. Zou dat kunnen of vraag ik te veel?
De gerelateerde HTML- en CSS-code ziet er nu zo uit.

<p>
Ten teken, dat wij ook voor absolute beginners toegankelijk
willen zijn, vermijden wij jargon en wordt gepoogd om voortdurend
Nederlands te gebruiken waar dat mogelijk en redelijk is, want
wat mankeert er aan onze
<section id="sec1">
<div id="div1">
<p id="p1" class="ppup">
<a class="keyword" id="k1">
moerstaal
</a>
<span>
Dit is de 'pop up'-tekst.
</span>
</p>
</span>
</p>
</div>
<section>?

<br>Waar het gebruik van Nederlandse begrippen niet voor de hand ligt (zoals bij 'browser') of niet mogelijk is, zijn die begrippen tussen enkele aanhalingstekens geplaatst.
</p>

p.ppup:hover {
text-decoration: none; /*background: #ffffcc;*/ z-index: 6;
}

p.ppup span {
position: relative;
left: -9999px;
margin: 20px 0 0 0px;
padding: 3px 3px 3px 3px;
border-style:solid;
border-color:black;
border-width:1px; z-index: 6;
}

p.ppup:hover span {
left: 2%; /*background: #ffffff;*/}

p.ppup span {
border-color: #28477a;
border-radius: .5em; /* Afgeronde hoeken */
border-style: solid;
border-width: 1px;
left: -9999px;
margin: 4px 0 0 0px;
padding: .2em .5em .3em .5em;
position: absolute;
}

p.ppup:hover span {
background: #ffffcc; /* Achtergrondkleur = zachtgeel */
margin: auto;
z-index: 6;
}

[Goeroeboeroe]

Hallo,
Voor zover ik weet kan dat niet met css alleen. Je kunt daarmee alleen een pop-up op steeds dezelfde plaats positioneren ten opzichte van de ouder, dus altijd boven, onder, enz.
Overigens heeft :hover voor een pop-up grote nadelen, want dat werkt allen goed bij gebruik van een muis of touchpad. Op een touchscreen werkt dat niet goed, en er is ook nog 'n verschil tussen iOS/iPadOS en Android.
Ook voor toegankelijkheid (schermlezers) is het niet ideaal.

Goed, dat was de afdeling Lastig.

Het zou wel kunnen met behulp van JavaScript, maar dat is behoorlijk wat werk. (Tenzij je ergens een kant-en-klare oplossing vindt natuurlijk.)
Je zou dan de positie van de span binnen het venster kunnen bepalen. Normaal genomen zou je de pop-up dan bijvoorbeeld iets boven de span kunnen zetten. Maar als de afstand tussen de span en de bovenkant van het venster te klein is, zou je de span pop-up dan onder de span kunnen zetten.
Bijkomend voordeel: je kunt dan gebruik maken van events in JavaScript: klik, aanraking, ':hover', en dergelijke, waardoor het in principe ook op touchscreens zou kunnen werken.

Eigenlijk is dit forum bedoeld voor vragen over de voorbeelden op deze site. Dat maakt verder niet zoveel uit, alleen kan het lang duren voor je 'n antwoord krijgt. Bovendien ben ik geen echte JavaScript-expert. Je kunt mogelijk meer hulp daarvoor krijgen op helpmij.nl, daar zitten veel meer mensen. En het kan even duren voor je hier een antwoord krijgt. Maar voel je vrij om eventuele vervolgvragen te stellen.

Een voorbeeld van wat ik ongeveer bedoel staat op https://stackoverflow.com/questions/706 ... e-location

[Drareg]

Voor zover ik weet kan dat niet met css alleen. Je kunt daarmee alleen een pop-up op steeds dezelfde plaats positioneren ten opzichte van de ouder, dus altijd boven, onder, enz.

Omdat ook CSS steeds geavanceerdere mogelijkheden krijgt, hoop(te) ik daar wel op.

Goed, dat was de afdeling Lastig.
Het zou wel kunnen met behulp van JavaScript, maar dat is behoorlijk wat werk. (Tenzij je ergens een kant-en-klare oplossing vindt natuurlijk.)

Ja, met JS kan ik niet uit de voeten, maar wanneer er een kant en klaar iets zou zijn dat ik kan invoegen, ben ik natuurlijk ook uit de brand.

Je zou dan de positie van de span binnen het venster kunnen bepalen. Normaal genomen zou je de pop-up dan bijvoorbeeld iets boven de span kunnen zetten. Maar als de afstand tussen de span en de bovenkant van het venster te klein is, zou je de span pop-up dan onder de span kunnen zetten.

Ja, en hetzelfde natuurlijk voor rechts en links.

Bijkomend voordeel: je kunt dan gebruik maken van events in JavaScript: klik, aanraking, ':hover', en dergelijke, waardoor het in principe ook op touchscreens zou kunnen werken.

Kortom, waar haal ik zo'n script vandaan?

Eigenlijk is dit forum bedoeld voor vragen over de voorbeelden op deze site.

Daar was ik ook nieuwsgierig naar om zodoende mogelijk op ideeën te komen, maar waar vind ik die? Ik zag meerdere keren, dat dat voor anderen kennelijk ook niet duidelijk was, dus misschien zou je dat wat duidelijker kunnen maken?

Dat maakt verder niet zoveel uit, alleen kan het lang duren voor je 'n antwoord krijgt.

Nou, als je dit "lang" noemt. Maar zelf verras ik mensen ook vaak door snellere reacties dan ze verwachtten.

Bovendien ben ik geen echte JavaScript-expert. Je kunt mogelijk meer hulp daarvoor krijgen op helpmij.nl, daar zitten veel meer mensen.

Ja, maar er bleek mij daar ook veel kaf onder het koren te zitten en er zijn daar ook een paar mensen die overal hun plasje over willen doen en doen alsof ze de wijsheid in pacht hebben en er vanuit gaan dat ieder ander onvoldoende z'n best doet en/of heeft gedaan om zelf dingen uit en op te zoeken.

En het kan even duren voor je hier een antwoord krijgt.

Nou, zoals ik hiervoor al schreef, valt dat mij bepaald niet tegen.

Een voorbeeld van wat ik ongeveer bedoel staat op https://stackoverflow.com/questions/706 ... e-location

Bedankt. Ik ga eens kijken of ik daar iets mee kan. Ik probeerde me al eens eerder op Stackoverflow te registreren, maar dat lukt steeds maar niet. Het lijkt alsof ik in een soort 'loop' terecht kom nadat ik m'n registratiegegevens probeerde te verzenden.
Maar ... zojuist nog een keer geprobeerd, en Bingo!
Poeh, maar toen? Ik stelde daar mijn vraag op dezelfde manier als hier, maar dat bleek niet te kunnen, want mijn HTML- en CSS-deel zouden op een bepaalde manier neergezet moeten worden. Hoe, dat werd mij niet duidelijk, want de Nederlandse vertaling is beroerd (dat moet tegenwoordig toch veeeel beter kunnen) en mijn Engels is onvoldoende om het in het Engels te begrijpen. Jouw probleem niet, natuurlijk maar ik meld het maar even ter info.

[Goeroeboeroe]

Dit bedoelde ik dus met langer wachten Gisteren ging het toevallig heel snel.
Ik was zelf ooit heel actief op helpmij.nl, maar op een gegeven moment had ik ook wat genoeg van de vaak foutieve antwoorden. Wat natuurlijk niet wil zeggen dat ik nooit fouten maak.
Dat is eigenlijk 'n beetje opzettelijk dat niet duidelijk staat vermeld dat het is bedoeld voor vragen e.d. bij de voorbeelden. Tegenwoordig heeft haast niemand meer 'n eigen site, omdat de meeste mensen Facebook, Wordpress, een of andere bibliotheek of zoiets gebruiken. Dus ik vind het wel leuk als er af en toe nog 'ns iemand zelf html/css schrijft. Ook op 'n forum als helpmij.nl kwamen vroeger soms wel tien vragen op één dag binnen, nu soms maar één per week, zag ik.
Bovendien vind ik het ook nog 'n leuke vraag. Dus als je geen haast hebt...

Vandaag van hot naar her gerend dus lekker veel tijd om te denken. Met de volgende mogelijkheden als resultaat.

Ik heb om te beginnen even je code aangepast:

Code: Selecteer alles

<!doctype html>
<html lang="nl">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="xxx">
	<title>xxx</title>
	<style>
		body {height: 150vh;}
		div#div2 {margin-top: 140vh;}
		p.ppup span {position: absolute; left: -9999px; ; background: #ffffcc; margin: 4px 0 0 0; padding: .2em .5em .3em .5em; border-style:solid; border-color:#28477a; border-width:1px; z-index: 6; border-radius: .5em;}
		p.ppup:hover {text-decoration: none; background: #ffffcc; z-index: 6; position: relative;}
		p.ppup:hover span {left: 2%;}
	</style>
</head>
<body>
	<section id="sec1">
		<div id="div1">
			<p id="p1" class="ppup">moerstaal
				<span>Dit is de 'pop up'-tekst bovenaan.</span>
			</p>
		</div>
		<div id="div2">
			<p id="p2" class="ppup">moerstaal
				<span>Dit is de 'pop up'-tekst onderaan.</span>
			</p>
		</div>
	</section>
</body>
</html>

In neem aan dat dit ongeveer de bedoeling is.
* De <a class="keyword" id="k1"> heb ik eruit gehaald, die is niet nodig. Als er een link in moet komen, kun je die er weer gewoon in zetten. Alleen levert de combinatie pop-up/link op een touchscreen zeer moeilijk oplosbare problemen op.
* 0px mag gewoon 0 zijn (zonder eenheid)
* Ik heb de html-tags aangepast, zodat ze aan de regels voldoen (te veel <p> en te weinig </section> e.d. aangepast).
* In de css heb ik regels gecombineerd, want sommige selectors stonden er twee keer in. Dat heeft geen nut, want een latere selector (die precies hetzelfde is als de eerdere) overschrijft die eerdere.
* margin auto bij de span is niet nodig, want dat is de standaardinstelling.
* De <span> had een relatieve en een absolute positie. Alleen de absolute positie heb ik gebruikt. Een relatieve positie heeft weinig zin hier, want dat verplaatst de <span> ten opzichte van zichzelf, ten opzichte van de normale positie.
* De <p> heb ik een relatieve positie gegeven. Als de <span> absoluut wordt gepositioneerd, wordt die gepositioneerd ten opzichte van de eerste ouder met een relatieve, fixed of absolute positie. Dat is nu de <p> met 'moerstaal'. Als er niet zo'n ouder is, wordt de absoluut gepositioneerde <span> neergezet ten opzichte van het venster van de browser. Dus als 'moerstaal' dan ergens in het midden van het scherm staat, zou de span met de pop-up ergens helemaal links komen te staan.
* Ik heb de body, de pagina, 150vh hoog gemaakt. 1 vh is 1% van de hoogte van het venster, 150 vh is dus anderhalf keer de hoogte van het venster. Hierdoor kun je de pagina scrollen.
Er zit een tweede <div> in, precies hetzelfde als de eerste, alleen heeft die een idioot grote marge aan de bovenkant. Daardoor komt die aan de onderkant van het venster te staan (of daaronder) en kun je zien wat er aan de onderkant gebeurt.

Zal best niet helemaal zijn zoal je het wilt hebben, maar dit geeft even een bruikbaar houvast.
Als je nou denkt "waar ben ik aan begonnen", dan moet je dat vooral even melden. Ik vind dit soort klussen leuk, dus als je het te ingewikkeld vind en er niets mee doet, is dat geen probleem.

Goed, de mogelijkheden.

1) Werkt alleen bij hoveren (met de muis of een touchpad): zoals het nu is.
Als het ook moet werken op een touchscreen (maar dan zonder <a> met link, want dat levert bergen problemen op), kun je

Code: Selecteer alles

p.ppup:hover {... css ... }
p.ppup:hover span {... css ... }

vervangen door

Code: Selecteer alles

p.ppup:hover, p.ppup:focus {... css ...}
p.ppup:hover span, p.ppup:focus span {... css ...}

Je moet dan bij de <p> nog tabindex="-1" toevoegen, anders werkt de aanraking niet:

Code: Selecteer alles

<p id="p1" class="ppup" tabindex="-1">

Als nu de <p> wordt aangeraakt, wordt de pop-up getoond. Als het scherm ergens anders wordt aangeraakt, sluit de pop-up weer. (Bij klikken met de muis op de <p> en ergens erbuiten klikken opent en sluit de pop-up ook.)

2) Je zou het gewoon zo kunnen laten als in de code van mij. (Met eventueel :focus en zo toegevoegd.) Je mag aannemen dat mensen weten dat ze moeten scrollen als tekst niet volledig is te zien.

3) Als de tekst echt alleen bij hoveren zichtbaar hoeft te worden, zou je een titel kunnen overwegen. Maar dit werkt dus niet op een touchscreen. En je kunt dat ook niet opmaken met een kleur of wat dan ook. Een titel staat echter wel altijd binnen het venster, dat regelt de browser automatisch.
Je krijgt dan iets als

Code: Selecteer alles

<p title="Dit is de pop-up tekst">

Als je hier met muis/touchpad overheen gaat, verschijnt de tekst. Maar je kunt het uiterlijk daarvan dus op geen enkele manier aanpassen.

4) Afhankelijk van wat er in de pop-up moet komen te staan, zou je ervoor kunnen kiezen die altijd te tonen. Dit kan een oplossing zijn bij afkortingen, die je dan de eerste keer voluit kunt tonen:

Code: Selecteer alles

<abbr title="Ik ben een afkorting">IBEA</abbr>

en de css bijvoorbeeld:

Code: Selecteer alles

abbr[title] {text-decoration: none; border-bottom: none;}
abbr[title]::after {content: " (" attr(title) ")"; font-size: 0.9em; font-style: italic; font-weight: normal;}

De tweede regel css met abbr[title] selecteert alle <abbr>'s die een title hebben.
::after zet daar iets achter.
content: bepaalt, wát er achter de afkorting komt te staan. Dat is hier een haakje openen, de inhoud van het attribuut 'title' en een haakje sluiten. Hier zou je dus "IBEA (Ik ben een afkorting)" zien staan. (De rest van de css is alleen voor het uiterlijk). Dit gedraagt zich als volledig normale tekst en komt dus nooit buiten het venster te staan. Ik doe dit zelf op deze site bij elke eerste afkorting. Maar dit werkt natuurlijk niet altijd bij elke pop-up. Je kunt moeilijk de grondwet of zo op deze manier weergeven.

5) Je kunt de <span> een position: fixed geven. Dan wordt de span met de pop-up altijd gepositioneerd ten opzichte van het venster van de browser en staat dus altijd binnen het venster. Maar dat is niet echt ideaal, want als de <p> met moerstaal bijvoorbeeld onderaan het venster staat en je <span> heeft een fixed positie op 10 px vanaf de bovenkant, dan staat de span met de pop-up dus 'n onwijs eind van de <p> vandaan. Maar het kán.
Dat wordt dan iets als

Code: Selecteer alles

p.ppup span {position: fixed; left: -9999px; ; background: #ffffcc; margin: 4px 0 0 0; padding: .2em .5em .3em .5em; border-style:solid; border-color:#28477a; border-width:1px; z-index: 6; border-radius: .5em;}
p.ppup:hover span {top: 10px; left: 0;}

Maar dit komt dus altijd in de linkerbovenhoek te staan, ongeacht waar de <p> met 'moerstaal' staat. Bovendien scrolt een fixed gepositioneerd element niet mee met de pagina, dus het kan ook nog 'ns hinderlijk over iets anders heen blijven staan.

6) Je zou de pop-up gedeeltelijk óver 'moerstaal' kunnen zetten. Bijvoorbeeld een heel klein beetje lager, zodat 'moerstaal' nog half is te zien. Dan staat de pop-up in ieder geval nooit bóven het venster. Wel kan deze nog gedeeltelijk aan de onderkant onder het venster komen te staan. Nooit helemaal, want de pop-up kan alleen verschijnen als 'moerstaal' zichtbaar is. Je mag aannemen dat mensen begrijpen dat ze moeten scrollen, als ze maar een stukje van de pop-up zien.
Dat is heel simpel te doen met iets als:

Code: Selecteer alles

p.ppup:hover span {left: 0; top: 10px;}

De <p> met 'moerstaal' heeft een absolute positie. De <span> met de pop-up wordt daardoor gepositioneerd ten opzichte van de <p>: 0 px vanaf links, dus precies onder 'moerstaal'. En 10 px lager dan 'moerstaal', dus 'moerstaal' is dus nog gedeeltelijk te zien.
Deze span met pop-up scrolt wel gewoon mee met de pagina, alleen een fixed scrolt niet mee.

Tenzij je echt dringende redenen hebt om het anders te doen (schoolopgave, baas-zonder-hersenen, of zo), zou ik het eigenlijk zo laten als in mijn code. Of eventueel voor oplossing 6 kiezen. (Eventueel met die toevoeging van :focus uit oplossing 1, dan werkt het ook op touchscreens.)

7) Als het echt zo moet dat de pop-up altijd binnen het venster moet staan (en niet zoals bij oplossing 4 altijd zichtbaar mag zijn), ontkom je inderdaad niet aan JavaScript. Dat is relatief eenvoudig, maar wel even wat meer werk. Als je dat wilt, wil ik daar best even naar kijken, maar dat kan dan wel 'n paar dagen duren.

Die code van mij helemaal bovenaan is in principe een hele pagina. Die kun je kopiëren en in je browser openen. En je kunt die natuurlijk aanpassen. Als die <a> terug moet en zo, kan dat gewoon. Maar ik geef er zelf altijd de voorkeur aan om een probleem op te lossen met zo weinig mogelijk code. Dan kunnen er ook maar weinig fouten in zitten. Als het dan werkt en je gaat geleidelijk dingen toevoegen, zie je gelijk als het misgaat.

[Drareg]

Dit bedoelde ik dus met langer wachten Gisteren ging het toevallig heel snel.

Nou ja, met "langer wachten" denk ik meer aan dagen of weken.

Dat is eigenlijk 'n beetje opzettelijk dat niet duidelijk staat vermeld dat het is bedoeld voor vragen e.d. bij de voorbeelden.

Maar die voorbeelden kon/kan ik niet vinden.

Tegenwoordig heeft haast niemand meer 'n eigen site, omdat de meeste mensen Facebook, Wordpress, een of andere bibliotheek of zoiets gebruiken. Dus ik vind het wel leuk als er af en toe nog 'ns iemand zelf html/css schrijft.

Nou, dat komt zo. Handleidingen zijn meestal niet vanuit het gezichtspunt van gebruikers geschreven en daardoor is het heel lastig (vooral in uitvoerige handleidingen) om een beetje snel te vinden wat je zoekt. HTML in combinatie met CSS biedt die mogelijkheid wel. Daarom ben ik jaren geleden begonnen met handleidingen voor mezelf daarmee te maken op basis van wat ik vond en waarvan ik verwachtte, dat ik die na verloop van tijd nog weleens nodig zou kunnen hebben.
Kortgeleden werd ik lid van een vereniging waarvan ik vond, dat ze een nogal knullige webstek (ik opteer voor m'n moerstaal waar dat kan) hadden. Omdat de ondersteuning van Drupal binnenkort zou eindigen, moesten ze hun webstek omzetten naar iets anders en hadden ze voor WP (WordPress) gekozen. Ik bood aan, om (vrijblijvend) iets te maken wat wat bezoekersvriendelijker zou zijn. Daar hadden ze wel oren naar, maar ik ben geen WP-fan en heb daardoor ook geen motivatie om me daar in te verdiepen. Ik vergelijk WP met een supermarkt die allerlei kant en klare producten bieden en HTML in combinatie met CSS met een kast met ingrediënten waarmee je heerlijke dingen naar eigen smaak kunt maken. Ook ben ik nogal gebruikersgericht, omdat ik het zelf ook prettig vind, wanneer iemand van mij uit gaat - en wie vind at niet? -. Daarom vind ik antwoorden op de vraag: "Wat wil je en waarom wil je dat?" belangrijker.
Ik ben niet iemand die het leuk vind om zomaar wat te prutsen; het moet een doel hebben. Dus een webstek ontwikkelen leek mij wel leuk en zinnig. Bovendien, van uitdagingen kun je veel leren.
Bij die vereniging hadden ze mensen waarvan ze verwachten, dat die mijn HTML/CSS-product wel om zouden kunnen zetten in WP. We zullen zien.

Ook op 'n forum als helpmij.nl kwamen vroeger soms wel tien vragen op één dag binnen, nu soms maar één per week, zag ik.

Dat zegt toch wel wat, volgens mij. Wanneer mensen tevreden zijn, komen ze terug en maken ze gratis reclame bij anderen, toch?

Bovendien vind ik het ook nog 'n leuke vraag.

Dat blijkt.

Dus als je geen haast hebt...

Maak je niet ongerust, maar laat je ook niet beïnvloeden door mijn reactietijd

Vandaag van hot naar her gerend dus lekker veel tijd om te denken.

Denken doe ik meestal wanneer ik wakker lig.
Even een vraagje tussendoor; Waar staat Goeroeboeroe voor? Ik ken de uil Oehoeboeroe uit de radioserie "Paulus de boskabouter" van Jean Dulieu https://nl.wikipedia.org/wiki/Paulus-de-boskabouter (ja, ik ben oud). Ben jij familie van die uil?

Met de volgende mogelijkheden als resultaat.

Ik heb om te beginnen even je code aangepast:

Ik ben zelf ondertussen ook wat aan het klooien geweest met wat resultaat, dat ik verderop in deze reactie zal plaatsen. De code die ik jou gaf, had ik ergens vandaan gehaald en dan is het meestal iets wat nog eens goed bekeken (aangepast en/of uitgekleed) moet worden.

Code: Selecteer alles

<!doctype html>
<html lang="nl">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="xxx">
	<title>xxx</title>
	<style>
		body {height: 150vh;}
		div#div2 {margin-top: 140vh;}
		p.ppup span {position: absolute; left: -9999px; ; background: #ffffcc; margin: 4px 0 0 0; padding: .2em .5em .3em .5em; border-style:solid; border-color:#28477a; border-width:1px; z-index: 6; border-radius: .5em;}
		p.ppup:hover {text-decoration: none; background: #ffffcc; z-index: 6; position: relative;}
		p.ppup:hover span {left: 2%;}
	</style>
</head>
<body>
	<section id="sec1">
		<div id="div1">
			<p id="p1" class="ppup">moerstaal
				<span>Dit is de 'pop up'-tekst bovenaan.</span>
			</p>
		</div>
		<div id="div2">
			<p id="p2" class="ppup">moerstaal
				<span>Dit is de 'pop up'-tekst onderaan.</span>
			</p>
		</div>
	</section>
</body>
</html>

In neem aan dat dit ongeveer de bedoeling is.

Ik heb ondertussen gauw een kopie van mijn product gemaakt onder de naam "Goeroeboeroe". Vervolgens jouw "section"-deel in een html-pagina daarvan geplaatst en het "style"-deel in m'n CSS-bestand en daar mijn stijldeel even uitgeschakeld. Ik ga er binnenkort even mee aan de slag, want, zoals ik hier boven al schreef, zitten er (nog) dingen in die anders moeten, maar dat komt omdat wat ik eerder plaatste nog onbehandeld was. Ik kom daarop terug in een volgende reactie.

* De <a class="keyword" id="k1"> heb ik eruit gehaald, die is niet nodig.

Ah, fijn. Ik vroeg me al af waar die voor dienden.

Als er een link in moet komen, kun je die er weer gewoon in zetten. Alleen levert de combinatie pop-up/link op een touchscreen zeer moeilijk oplosbare problemen op.

Nou, feitelijk is het zo, dat ik in de tekst 'links' heb geplaatst, waarbij voor geïnteresseerden een 'pop up' verschijnt met aanvullende tekst, als een soort voetnoot.

* 0px mag gewoon 0 zijn (zonder eenheid)

Weet ik, maar beter 2 keer dan geen keer. 't Was een kopietje.

[KNIP]

Ik heb van het geknipte nota genomen en dat geldt ook verderop wanneer je dat tegenkomt.

* Ik heb de body, de pagina, 150vh hoog gemaakt. 1 vh is 1% van de hoogte van het venster, 150 vh is dus anderhalf keer de hoogte van het venster. Hierdoor kun je de pagina scrollen.
Er zit een tweede <div> in, precies hetzelfde als de eerste, alleen heeft die een idioot grote marge aan de bovenkant. Daardoor komt die aan de onderkant van het venster te staan (of daaronder) en kun je zien wat er aan de onderkant gebeurt.

Ja, die 2e is in mijn geval niet nodig, maar dat soort dingen krijg je met kopietjes van anderen.

Zal best niet helemaal zijn zoals je het wilt hebben, maar dit geeft even een bruikbaar houvast.
Als je nou denkt "waar ben ik aan begonnen", dan moet je dat vooral even melden. Ik vind dit soort klussen leuk, dus als je het te ingewikkeld vind en er niets mee doet, is dat geen probleem.

Maak je niet ongerust want ik ben heel blij met jouw reacties. Hopelijk kun jij ook een beetje tegen mijn "gekluns".

Goed, de mogelijkheden.

1) Werkt alleen bij hoveren (met de muis of een touchpad): zoals het nu is.
Als het ook moet werken op een touchscreen (maar dan zonder <a> met link, want dat levert bergen problemen op), kun je

Code: Selecteer alles

p.ppup:hover {... css ... }
p.ppup:hover span {... css ... }

vervangen door

Code: Selecteer alles

p.ppup:hover, p.ppup:focus {... css ...}
p.ppup:hover span, p.ppup:focus span {... css ...}

Je moet dan bij de <p> nog tabindex="-1" toevoegen, anders werkt de aanraking niet:

Code: Selecteer alles

<p id="p1" class="ppup" tabindex="-1">

Als nu de <p> wordt aangeraakt, wordt de pop-up getoond. Als het scherm ergens anders wordt aangeraakt, sluit de pop-up weer. (Bij klikken met de muis op de <p> en ergens erbuiten klikken opent en sluit de pop-up ook.)

2) Je zou het gewoon zo kunnen laten als in de code van mij. (Met eventueel :focus en zo toegevoegd.) Je mag aannemen dat mensen weten dat ze moeten scrollen als tekst niet volledig is te zien.

Ja, dat laatste neem ik ook aan. Niettemin heb ik in mijn ontwerp de kop (met daarin menuknoppen) en de voet, van een deels transparant kleurverloop voorzien waar de pagina-inhoud dan onderdoor schuift. Zo is, zonder naar schuifbalken te hoeven kijken, te zien of er nog meer volgt.

3) Als de tekst echt alleen bij hoveren zichtbaar hoeft te worden, zou je een titel kunnen overwegen.

Momenteel heb ik het zo ingesteld, dat de bovenkant van het 'pop up'-blok net onder de gerelateerde koppeling valt. Daardoor werkt die koppeling feitelijk als titel.

Maar dit werkt dus niet op een touchscreen.

Mooi. dan speelt dat probleem dus niet.

En je kunt dat ook niet opmaken met een kleur of wat dan ook.

Ik neem aan, dat op die aanraakbeeldschermen, die kleur dan wegvalt, maar dat lijkt mij geen probleem.

[KNIP]
Ik doe dit zelf op deze site bij elke eerste afkorting.

Ik ben gewend om de eerste keer dat ik een afkorting gebruik waarvan ik niet zeker ben of die bij een lezer bekend is, de betekenis tussen haakjes daarachter te zetten (zoals je bovenaan ook bij de door mij gebruikte afkorting "WP" hebt kunnen vaststellen).

5) Je kunt de <span> een position: fixed geven. Dan wordt de span met de pop-up altijd gepositioneerd ten opzichte van het venster van de browser en staat dus altijd binnen het venster. Maar dat is niet echt ideaal, want als de <p> met moerstaal bijvoorbeeld onderaan het venster staat en je <span> heeft een fixed positie op 10 px vanaf de bovenkant, dan staat de span met de pop-up dus 'n onwijs eind van de <p> vandaan. Maar het kán.

Nee, wat ik wil, is dat de 'pop up' net onder de 'link' komt, zoals dat nu het geval is. Maar ... wanneer die 'link' op een bepaald moment toevallig helemaal rechts staat, dat die 'pop up' dus zo ver naar links opschuift als nodig. Nu blijkt een deel buiten het venster te vallen, waardoor een deel niet meer leesbaar is. Ik heb als noodverbandje de tekst met <br>'s ingekort, maar dat is voorlopig natuurlijk. Wanneer een 'link' toevallig een keer onderaan staat, zou de 'pop up' boven de link moeten komen. Dus, in het ingewikkeldste geval, dat de 'link' rechts onderaan staat, moet de koppeling naar boven en voor zover nodig naar links. Ja, een gek kan meer vragen, dan een wijze kan bieden.

[KNIP]
6) Je zou de pop-up gedeeltelijk óver 'moerstaal' kunnen zetten. Bijvoorbeeld een heel klein beetje lager, zodat 'moerstaal' nog half is te zien.

Ik heb hem zoveel lager gezet, dat 'moerstaal' als titel fungeert.
[KNIP]
Je mag aannemen dat mensen begrijpen dat ze moeten scrollen, als ze maar een stukje van de pop-up zien.
[/quote]
Mee eens, maar inmiddels weet je wat ik wil en waarom.

Dat is heel simpel te doen met iets als:

Code: Selecteer alles

p.ppup:hover span {left: 0; top: 10px;}

De <p> met 'moerstaal' heeft een absolute positie. De <span> met de pop-up wordt daardoor gepositioneerd ten opzichte van de <p>: 0 px vanaf links, dus precies onder 'moerstaal'. En 10 px lager dan 'moerstaal', dus 'moerstaal' is dus nog gedeeltelijk te zien.

Ik heb dat gedaan middels "margin-top: 1.7em;"

Tenzij je echt dringende redenen hebt om het anders te doen (schoolopgave, baas-zonder-hersenen, of zo), zou ik het eigenlijk zo laten als in mijn code. Of eventueel voor oplossing 6 kiezen. (Eventueel met die toevoeging van :focus uit oplossing 1, dan werkt het ook op touchscreens.)

Nee, het is puur een eigen wens om dingen zo te willen zoals ik hierboven heb uitgelegd. Dus, een 'pop up' die net onder de link verschijnt, maar wanneer daar onder of rechts van onvoldoende ruimte voor is, dat die dan voor zover nodig naar links schuift en/of naar net boven die 'link' springt.

7) Als het echt zo moet dat de pop-up altijd binnen het venster moet staan (en niet zoals bij oplossing 4 altijd zichtbaar mag zijn), ontkom je inderdaad niet aan JavaScript. Dat is relatief eenvoudig, maar wel even wat meer werk. Als je dat wilt, wil ik daar best even naar kijken, maar dat kan dan wel 'n paar dagen duren.

Ik heb het gevoel, dat wat ik wil, zoals ik hier net boven in vette tekst heb samengevat (waarschijnlijk was ik in m'n eerste bericht wat verwarrend) met CSS mogelijk zou moeten zijn.

Die code van mij helemaal bovenaan is in principe een hele pagina. Die kun je kopiëren en in je browser openen. En je kunt die natuurlijk aanpassen. Als die <a> terug moet en zo, kan dat gewoon. Maar ik geef er zelf altijd de voorkeur aan om een probleem op te lossen met zo weinig mogelijk code. Dan kunnen er ook maar weinig fouten in zitten. Als het dan werkt en je gaat geleidelijk dingen toevoegen, zie je gelijk als het misgaat.

Dat is ook mijn uitgangspunt, maar omdat mogelijk anderen later ook met mijn code uit de voeten moeten kunnen, "overdrijf" ik niet alleen met toelichtende tekst middels <!-- --> en /* */ maar voeg ik ook onderdelen van stijlen niet samen.

Wordt vervolgd.

N.B. Is er ook een optie, dat ik een e-mail waarschuwing krijg, wanneer er een nieuwe reactie is?

[Goeroeboeroe]

Even een snelle reactie, want het is onhandig als je geen melding krijgt van een reactie.
Eerlijk gezegd weet ik niet heel zeker, hoe je dat in kunt stellen. Ik krijg namelijk een melding van álle berichten. (Er wordt toch met enige regelmaat rotzooi die niets met het onderwerp te maken heeft geplaatst, zoals reclame of porno. Die kan ik dan snel verwijderen/blokkeren.) Maar ik neem aan dat dat niet je bedoeling is. (Anders kun je dat instellen in je profiel.)

Het is mogelijk dat mail in je spambox terecht komt, afhankelijk van hoe streng die is ingesteld. gmail is vrij streng, maar het is inmiddels zo ingesteld op het forum dat mails daar netjes aankomen. Maar het is 'n mogelijkheid.

Ah, ik zie het nu: als je 'n reactie schrijft staan onder wat je aan het schrijven bent twee tabs: 'Opties' en 'Bijlagen'. Onder 'Opties' kun je aanvinken 'Informeer me wanneer een reactie is geplaatst'. Ik neem aan dat dat de bedoeling is. Hopelijk werkt dat.

Langere reactie volgt later.

Wat ik al wel leuk vond: jij bent de eerste in dertig/veertig jaar die de link legt met Oeroeboeroe. Ik ben dus ook al ouder. Lang geleden was ik onderzoeksjounalist. Ik heb tamelijk veel geschreven over (enge en sympathieke) alternatieve stromingen, (integere en niet-integere) goeroe's, en dergelijke. Omdat door dat geschrijf niet iedereen helemaal dol op me was, leek het me niet handig zo'n forum te runnen onder m'n eigen naam.
Oeroeboeroe vond ik als kind heel leuk, en de G ervoor komt dus van de goeroe's. Voor zover ik weet komt dit woord verder nergens op internet voor, behalve als naam van 'n Indonesisch eiland. Zodoende.

[Drareg]

een 'pop up' die net onder de link verschijnt, maar wanneer daar onder of rechts van onvoldoende ruimte voor is, dat die dan voor zover nodig naar links schuift en/of naar net boven die 'link' springt.

Om maar even een nieuwe start te maken; op het moment heb ik het onderstaande, na uitkleden (misschien ben ik wat dit betreft wat te ver gegaan?) en aanpassen:

.popup {
display: inline-block;
position: relative;
}

.popup:hover {
}

.popup span {
border: 1px solid #28477a; /* Randkleur = blauwgrijs */
border-radius: .5em; /* Afgeronde hoeken */
border-style: solid;
border-width: 1px;
left: 0; /* Bepaalt de positie van de 'pop up' vanaf de linkerkant van de koppeling. */
opacity: 0;
margin-top: 1.7em; /* Verticale afstand onder de koppeling */
padding: .2em .5em .3em .5em;
position: absolute;
width: max-content; /* Hier kan ook een max. breedte aangegeven worden */

.popup:hover span {
background: #fafad2; /* Achtergrondkleur = zeer lichtgeel */
color: black;
font-weight: normal;
opacity: 1;
z-index: 99; /* Zorgt er voor, dat de 'pop up' altijd bovenop al het andere wordt getoond. */
}

<p>
Ten teken, dat wij ook voor absolute beginners toegankelijk
willen zijn, vermijden wij jargon en wordt gepoogd om voortdurend
Nederlands te gebruiken waar dat mogelijk en redelijk is, want
wat mankeert er aan onze
<a class="keywordpopup popup">
moerstaal
<span>
Nederlands is onze moerstaal en zeer rijk aan begrippen en uitdrukkingen. Zeker in vergelijking met vele andere talen. Daardoor zijn
er geen beperkingen voor het gebruik daarvan.
<br>Jargon (het gebruik van specifieke begrippen/woorden door/voor een bepaalde groep specialisten, zoals medici en informatici) is
hinderlijk in de communicatie met niet-specialisten.
<br>Jargon is ondergeschikt aan talen en is geen taal op zichzelf.
<br>Bepaalde niet-specialisten overschatten vaak de kennis van anderen van jargon.
<br>Voorafgaande controle op de kennis daarvan, is daarom vaak noodzakelijk, om misverstanden en hindernissen in de
communicatie te voorkomen.
<br>Die niet-specialisten gebruiken jargon vaak onnodig om, vaak onbewust, de suggestie te wekken dat ze tot de groep specialisten
behoren of de kennis van de eigen taal is mogelijk (te) gebrekkig.
<br>Een moerstaal (zoals het Nederlands voor ons) is voor iedereen (ook specialisten) te begrijpen die met die taal is groot gebracht.
</span>
</a>?
<br>Waar het gebruik van Nederlandse begrippen niet voor de hand ligt (zoals bij 'browser') of niet mogelijk is, zijn die begrippen tussen
enkele aanhalingstekens geplaatst.
</p>

Wat is nu nog overbodig, zou beter kunnen en tenslotte, hoe kan ik mijn wens (zie helemaal bovenaan deze reactie) vervullen middels CSS?

N.B.
Ik zat net wat door de forumonderwerpen te struinen en kwam toen dit tegen:
Code: Selecteer alles

onclick="void(0)"

Omdat je eerder melding maakte, dat mijn constructies problemen zouden (kunnen) geven met aanraakschermen; is dit dan ook een oplossing voor mij?
Dit is natuurlijk een vraag binnen een vraag en gaat feitelijk over iets anders dan mijn oorspronkelijk vraag, maar geen zeil gezet, geen wind gevangen oftewel niet geschoten, is zeker mis.

Overigens begrijp ik inmiddels ook, waardoor het kwam, dat ik jouw CSS-voorbeelden niet kon vinden. Ik was via het internet op deze pagina terecht gekomen en had niet gelijk door dat dat iets was van een groter geheel. Nu wel.

[Drareg]

Bedacht me net, dat "margin-right: 1em;" of zo, mogelijk de rechterkant van een 'pop up' binnen het venster zou kunnen houden, maar dat bleek toch niet het geval. Of ik heb het niet in de juiste stijl gezet? Toch moet op de ene of andere manier zoiets werken, denk ik.

[Goeroeboeroe]

Even snel, voor ik aan een meer uitgewerkte reactie begin:
Nee, dat gaat 'm niet worden. Afhankelijk van andere elementen zou je misschien kunnen zorgen dat zo'n pop-up nooit rechts buiten het venster komt te staan. Zou ik even over moeten nadenken, want dit is best wel 'n apart probleem. Maakt 't ook leuk.
Maar je loopt dan zeker de kans dat de pop-up, afhankelijk van de plaats waar die wordt opgeroepen, juist links buiten het venster komt te staan.
Voor boven en onder geldt hetzelfde.
Ik heb inmiddels ook al even gezocht, maar slechts één script gevonden. Deze vraag is echt apart. En dat script is weer veel te uitgebreid voor dit probleem.
Je ontkomt niet aan een of andere berekening: iets als 'vraag de breedte van het venster op, vraag de breedte van de tooltip op, vraag de positie van de tooltip op. Als positie van de tooltip + breedte van de tooltip meer is dan de breedte van het venster, zet de tooltip dan niet vanaf links, maar vanaf rechts neer. Zoiets. En dan voor boven/beneden hetzelfde.
Dat is in principe niet heel ingewikkeld om te maken. Ga ik nu meer uitgewerkt reageren.

[Goeroeboeroe]

Dit is een tamelijk ingewikkeld probleem. In overleg met Drareg (de starter) is besloten te proberen een volledig voorbeeld te maken. Dat kan wel enige tijd duren, want een voorbeeld op deze site moet ook nog toegankelijk zijn, geschikt voor mobieltjes en desktop, en zo nog het een en ander.
We gaan ermee aan de slag en als het lukt, wordt het nieuwe voorbeeld ook hier gemeld.

[Drareg]

We gaan ermee aan de slag en als het lukt, wordt het nieuwe voorbeeld ook hier gemeld.

Maar het lukte niet, want op 21 februari gooide Goeroeboeroe om onverklaarbare redenen plotseling de handdoek in de ring en bleek niet meer te reageren. Jammer, want we waren goed op weg.