positie tooltip

Status
Niet open voor verdere reacties.
Grote tooltips vind ik zeer onrustig op een website maar dat is persoonlijk. Tooltips missen sowieso hun doel omdat 60% van de bezoekers een touchscreen heeft zonder muis. Als ik naar Bootstrap kijk dan wordt daar naast de css ook een jQuery plugin gebruikt. Mogelijk is dit voor goede cross browser functionaliteit noodzakelijk.
 
Bedankt bron voor je reactie.
Heb je ook een oplossing voor mijn probleem?
 
Volgens mij gebruikt hij al JavaScript / jQuery voor deze tooltips. Persoonlijk zou ik het volledig via CSS doen, prima mogelijk en ook nog eens beter ondersteund. Of standaard een titel onder de afbeelding toevoegen, zodat het ook op mobiele apparaten zichtbaar is.

Wanneer je het met CSS zou gaan doen, zou je een class aan moeten maken met als naam iets van '.hasTitle' / '.heeftTitel', en een data attribuut bij de HTML. Dus als volgt: <img src="images/canada/Alberta 024.jpg" data-title="Slippers met spikes!" width="300" height="329" id="sprytrigger2" class="hasTitle">, echter omdat de <img> tag geen ::before ondersteund, kan het niet meteen met enkel CSS. Je moet dus of een container toevoegen, of een <span> met background image aanmaken. In dit voorbeeld heb ik voor de extra container gekozen, omdat dit waarschijnlijk makkelijker is om toe te voegen.

Extra container:

<div data-title="Slippers met spikes!" class="hasTitle left">
<img src="images/canada/Alberta 024.jpg" width="300" height="329" id="sprytrigger2">
</div>

Dan aan je CSS bestand het volgende toevoegen:

Code: 
html body .sidebar2 {
  overflow: visible; /* Om de tooltip zichtbaar te maken. */
}

div.hasTitle {
  position: relative;
}

div.hasTitle::before {
  position: absolute;
  top: calc(50% - (40px / 2));
  content: attr(data-title);
  color: #CCCCCC;
  font-family: "Bookman Old Style";
  font-size: medium;
  background-color: #006700;
  padding: 10px 15px 10px 15px;
  border: 1px solid #0C1F00;
  border-radius: 10px;
  visibility: hidden;
  opacity: 1;
  z-index: 100;
  transition: all .3s ease-in-out;
}

/* Wanneer je de titel links van je afbeelding wilt */
div.hasTitle.left::before {
  left: -25px;
    -ms-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -ms-transform: perspective(1px) translateX(-100%);
    -moz-transform: perspective(1px) translateX(-100%);
    -webkit-transform: perspective(1px) translateX(-100%);
    transform: perspective(1px) translateX(-100%);
}

/* Wanneer je de titel rechts van je afbeelding wilt */
div.hasTitle.right::before {
    right: -25px;
    -ms-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -ms-transform: perspective(1px) translateX(100%);
    -moz-transform: perspective(1px) translateX(100%);
    -webkit-transform: perspective(1px) translateX(100%);
    transform: perspective(1px) translateX(100%);
}

div.hasTitle:hover::before {
  visibility: visible;
  opacity: 1;
}

Ik heb de huidige styling van je tooltips nagemaakt, maar je kan de styling natuurlijk altijd nog zelf aanpassen.

AANPASSINGEN: ik heb de browser support toegevoegd voor de transform property, voor de rest zou ik niet weten wat er niet cross browser is. Wanneer mensen dit bekijken in een browserversie van 3 jaar geleden hoeven ze wat mij betreft ook niet te verwachten dat een website zoals verwacht functioneert.
 
Laatst bewerkt:
@toxicdreams
De css is niet cross browser wat indirect wel de vraag van de TS is. Btw: wel een +1 voor het gebruik van data- en calc.
Een cross browser oplossing is op dit moment alleen met JS / jQuery mogelijk.
 
bron zei:
@toxicdreams
De css is niet cross browser wat indirect wel de vraag van de TS is. Btw: wel een +1 voor het gebruik van data- en calc.
Een cross browser oplossing is op dit moment alleen met JS / jQuery mogelijk.
Klik om te vergroten...

Ik had inderdaad niet voldoende geplaatst bij transform, voor de rest was het toch allemaal gewoon cross browser? Je kan beter CSS gebruiken dan JS / jQuery, aangezien dat trager is. Zoals ik er ook al bij plaatste, hoeven mensen met een browserversie van 3 jaar geleden niet te verwachten dat een website zoals verwacht functioneert. ( wat een zin.. :) )

Toch bedankt voor je reactie, aangezien de transform property inderdaad niet overal standaard wordt ondersteund.
 
De voorkeur voor css ben ik helemaal met je eens. Over de performace, voor de website bezoeker is css beslist veel prettiger vanwege de snelle response. Google kijkt er anders tegenaan, pagina's met weinig css en dan de scripts vlak boven </body> zijn voor Google snelle pagina's. Het is hiertussen balanceren.

Cross browser. Het hangt er vanaf waar je de datumgrens legt. Vaak wordt IE/Edge als referentie genomen. Leg je de datumgrens bij IE9 of bij IE11 of bij Edge 12? Of leg je eenvoudig de datumgrens bij de laatste versie van elke browser?
Bijvoorbeeld bij calc wat dingetjes die niet in elke versie of op elk platform goed werken.
Een element met calc en transform of transitioning werkt in IE11 niet goed.
Alle Android 4 browsers supporten geen calc met vermenigvuldigen of delen.
De prefix -moz-calc en -webkit-calc (datumlijn IE10) zijn nodig in je css.

Logisch is de veronderstelling dat iemand dan maar zijn/haar browser up-to-date moet houden. Echter, websites die het gebruik van versies bijhouden laten zien dt een groot deel van de browsers niet up-to-date is en helaas moeten wij met die mensen rekening houden.
 
bron zei:
De voorkeur voor css ben ik helemaal met je eens. Over de performace, voor de website bezoeker is css beslist veel prettiger vanwege de snelle response. Google kijkt er anders tegenaan, pagina's met weinig css en dan de scripts vlak boven </body> zijn voor Google snelle pagina's. Het is hiertussen balanceren.

Cross browser. Het hangt er vanaf waar je de datumgrens legt. Vaak wordt IE/Edge als referentie genomen. Leg je de datumgrens bij IE9 of bij IE11 of bij Edge 12? Of leg je eenvoudig de datumgrens bij de laatste versie van elke browser?
Bijvoorbeeld bij calc wat dingetjes die niet in elke versie of op elk platform goed werken.
Een element met calc en transform of transitioning werkt in IE11 niet goed.
Alle Android 4 browsers supporten geen calc met vermenigvuldigen of delen.
De prefix -moz-calc en -webkit-calc (datumlijn IE10) zijn nodig in je css.

Logisch is de veronderstelling dat iemand dan maar zijn/haar browser up-to-date moet houden. Echter, websites die het gebruik van versies bijhouden laten zien dt een groot deel van de browsers niet up-to-date is en helaas moeten wij met die mensen rekening houden.
Klik om te vergroten...

Google kijkt er anders tegenaan, pagina's met weinig css en dan de scripts vlak boven </body> zijn voor Google snelle pagina's. -> Is dat zo? Dat wist ik niet, weer iets geleerd haha.

Leg je de datumgrens bij IE9 of bij IE11 of bij Edge 12? Of leg je eenvoudig de datumgrens bij de laatste versie van elke browser? -> Zoals ik al in mijn reactie aangaf, vind ik ~3 jaar wel te veel. 2 jaar oud gaat nog, maar dat vind ik persoonlijk ook al te oud. Niet alleen omdat je bepaalde functionaliteiten mist, maar ook simpelweg vanwege de veiligheid.

Een element met calc en transform of transitioning werkt in IE11 niet goed. -> Komt uit 2013, mensen die deze browserversie nog gebruiken mogen er wat mij betreft best aan herinnerd worden dat hun browser erg is verouderd. Wanneer alles nog prima werkt is er natuurlijk weinig reden om over te stappen. Wij kunnen ook nog tags als <center> en <font> gebruiken, maar dit doen wij toch ook niet meer ( hoop ik ;) )? Daarbij is een browser uit 2013 mogelijk ook schadelijk. Ik kan trouwens niet vinden dat een element als calc niet goed werkt in IE11, heb je hier voorbeelden van? Transform, tja hierover heb je inderdaad wel gelijk. Transition is niet verplicht, dat is gewoon om het mooier te maken.

Alle Android 4 browsers supporten geen calc met vermenigvuldigen of delen. -> Android 4 komt uit 2011. Moet ik nog meer zeggen?.. :)

De calc functie wordt ondersteund sinds:
Versie 26.0 van Chrome ( versie 19.0 met -webkit- ). Chrome 26.0 komt uit 2013.
Versie 9.0 van Internet Explorer. Internet Explorer 9 komt uit 2009.
Versie 16.0 van Firefox ( versie 4.0 met -moz- ). Firefox 16.0 komt uit 2012.
Versie 7.0 van Safari ( versie 6.0 met -webkit- ). Versie 7.0 van Safari komt uit 2013.
Versie 15.0 van Opera. Versie 15.0 van Opera komt uit 2013.

helaas moeten wij met die mensen rekening houden. -> Ik ben het wel met je eens hoor, ondanks mijn enorm tegensprekende verhaal hierboven :$ Niet iedereen is zo vaardig met een computer als wij, maar om het maar even in vergelijking te zetten: je mag ook niet zonder rijbewijs rijden, maar iedere persoon mag wel van alles online doen. Wanneer je verouderde versies gebruikt, die vatbaar zijn voor aanvallen of backdoors o.i.d. hebben breng je niet alleen je eigen privé data in gevaar, maar ook die van andere mensen. Ik geloof namelijk niet dat er veel mensen staan die enkel en alleen data van zichzelf op de PC hebben staan. Ook kan je gebruikt worden in een botnet, hiertegen zijn ze nu ook actie aan het ondernemen ( ik heb het dan over IOT ), maar eerst mochten deze apparaten gewoon gemaakt worden zonder minimale beveiligingsregels. Het is misschien redelijk overdreven, maar het is jammer dat wij niet het beste kunnen neerzetten omdat mensen die er simpelweg niet voldoende van begrijpen het internet ook gebruiken. Toch vind ik dat er ergens een lijn moet zitten. 2 jaar terug wil ik nog wel ondersteunen, maar 3+ jaar vind ik persoonlijk echt te gek worden, dan belemmer ik mijzelf teveel.
 
Laatst bewerkt:
RE: Google kijkt er anders tegenaan, pagina's met weinig css en dan de scripts vlak boven </body> zijn voor Google snelle pagina's
Altijd even een gebouwde website optimaliseren voor Google Pagespeed Insight. Richtlijn: mobiel 80+ en desktop 90+

RE: 2 jaar oud gaat nog, maar dat vind ik persoonlijk ook al te oud.
Tja, als website bouwer mag ik niet aan de bezoeker melden dat hij/zij onveilig bezig is, dat is de verantwoordelijkheid van die persoon. Mijn websites werken op browsers vanaf de IE10 datumgrens. Hiermee leg ik mij geen beperkingen op omdat alle browsers vanaf deze tijdlijn "proberen" te voldoen aan de w3c. Als iets in css bij een bepaalde browser niet helemaal lukt dan zoek ik een andere (bij voorkeur css) oplossing. Voor iedereen ligt de grens anders. Net even IE10 opgezocht, bij mij is dat dus bij 5 jaar.

Jij en ik weten waarom het belangrijk is om software up-to-date te houden, ik denk wel dat we schikken van het aantal mensen dat al blij is dat de browser het doet. Dan nog de vraag of zij weten dat er meerdere browsers zijn. Al met al vind ik het "hoe oud is een browser" niet belangrijk. Het gaat mij erom dat de website geschikt is voor een groot aantal bezoekers, theoretisch onafhankelijk van hun browser versie, praktisch gezien is dat niet haalbaar maar het marktaandeel van een browser versie is dan bepalend voor wel of geen support.

Ik vraag mij trouwens af wie die 0,14% in Nederland is die Internet Explorer 8 nog gebruikt :mad:
Bij 5 miljoen browsers (wilde gok) zijn dat 7000 IE8 browsers. Zijn er zoveel mensen met een computer museum?
 
bron zei:
RE: Google kijkt er anders tegenaan, pagina's met weinig css en dan de scripts vlak boven </body> zijn voor Google snelle pagina's
Altijd even een gebouwde website optimaliseren voor Google Pagespeed Insight. Richtlijn: mobiel 80+ en desktop 90+

RE: 2 jaar oud gaat nog, maar dat vind ik persoonlijk ook al te oud.
Tja, als website bouwer mag ik niet aan de bezoeker melden dat hij/zij onveilig bezig is, dat is de verantwoordelijkheid van die persoon. Mijn websites werken op browsers vanaf de IE10 datumgrens. Hiermee leg ik mij geen beperkingen op omdat alle browsers vanaf deze tijdlijn "proberen" te voldoen aan de w3c. Als iets in css bij een bepaalde browser niet helemaal lukt dan zoek ik een andere (bij voorkeur css) oplossing. Voor iedereen ligt de grens anders. Net even IE10 opgezocht, bij mij is dat dus bij 5 jaar.

Jij en ik weten waarom het belangrijk is om software up-to-date te houden, ik denk wel dat we schikken van het aantal mensen dat al blij is dat de browser het doet. Dan nog de vraag of zij weten dat er meerdere browsers zijn. Al met al vind ik het "hoe oud is een browser" niet belangrijk. Het gaat mij erom dat de website geschikt is voor een groot aantal bezoekers, theoretisch onafhankelijk van hun browser versie, praktisch gezien is dat niet haalbaar maar het marktaandeel van een browser versie is dan bepalend voor wel of geen support.

Ik vraag mij trouwens af wie die 0,14% in Nederland is die Internet Explorer 8 nog gebruikt :mad:
Bij 5 miljoen browsers (wilde gok) zijn dat 7000 IE8 browsers. Zijn er zoveel mensen met een computer museum?
Klik om te vergroten...
 
Bedankt voor al jullie reacties. Ik moet eerlijk bekennen dat ik niet alles ervan snap. Jullie spreken over cross browser toepasbaarheid. Ik neem aan dat hiermee bedoeld wordt dat website bij alle mogelijke soorten browsers goed werkt. Op dat punt kan ik zeggen dat mijn website op dit punt van tooltip positionering steeds geod gewerkt heeft in zowel IE, als Firefox als Chrome. Alleen de laatste tijd werkt het niet goed meer alleen in Chrome. Ik wil maar zeggen: Er is geen sprake van oudere versies van browsers. Ik, als betrekkelijke leek, gebruik Dreamweaver voor het bouwen van mijn site. DW introduceert bij het invoeren van tooltips twee files waarin de tooltip wordt gedefinieerd: een css file en een js file. Ik veronderstel dat de ingeslopen fout met name in de js file schuilt. Ik heb daar echter volstrekt geen verstand van maar vraag me af of een van jullie daar een fout in kan vinden cq een verbetering in aan kan brengen zo dat het plaatsingsprobleem van tooltips in chrome zich niet meer voordoet. (Ik heb ook weinig zin om alle tooltips in mijn site opnieuw met css, zoals jullie aangeven, te definieren.
 
@apcmvw
We dwaalden af. Terug on topic ;)
Er zitten veel structuurfouten in de html. Bijvoorbeeld op de pagina die je noemt
Code: 
Hier werkt de tooltip wel

<p class="artikeltekst">
  dan wat tekst
  <img src="images/canada/DSC02234.JPG" alt="" width="570" height="179" id="sprytrigger4" style="...." />
  dan nog wat tekst
[COLOR="#B22222"]DIT MIST:[/COLOR] </p>

Hier werkt de tooltip niet

[COLOR="#B22222"]DIT MIST:[/COLOR] <p class="artikeltekst">
  dan wat tekst
  <img src="images/canada/DSC02295.JPG" alt="" width="250" height="188" class="artikeltekst" id="sprytrigger8"  style="...." />
  dan nog wat tekst
</p>
Je hebt zo te zien wat werk om de html op orde te krijgen.
Suc6 met de website.
 
En om eens volledig af te wijken van andere voorbeelden

Code: 
<script type="text/javascript">
function mytooltip_show(tooltipId, parentId){
    it = document.getElementById(tooltipId);
    if ((it.style.top==''||it.style.top == 0)&&(it.style.left==''||it.style.left==0)){
        theSender=document.getElementById(parentId);
        it.style.top=(theSender.offsetHeight/18,5+theSender.offsetTop)+'px';
        it.style.left=(theSender.offsetWidth/1+theSender.offsetLeft)+'px';
    }
    it.style.visibility='visible';
}
function mytooltip_hide(id){
    document.getElementById(id).style.visibility='hidden';
}
</script>

Bij het afprinten van de data zit dan de complexiteit
HTML: 
<div class="equally" onmouseover="mytooltip_show('tooltip-%i->value%','item-%i->value%');"  onmouseout="mytooltip_hide('tooltip-%i->value%');">
 <h3>%key->value%</h3>

...


  <div id="tooltip-%i->value%" class="mytooltip equally"><!--visual hidden-->
...
 </div>
</div>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan