Kan dat eigenlijk wel: de tooltip buiten de wrapper laten verschijnen?

Status
Niet open voor verdere reacties.
J

janyep

Gebruiker
Lid geworden
7 mei 2008
Berichten
261
Hallo
Ik hoop van harte dat hier een liefhebber voor is: een prima hersenkraker.
het kwartje wil bij mij niet vallen en dan zie je door de bomen het bos niet meer, nietwaar :)

heb van alles geprobeerd met position: relative of absolute, display: inline, block of inline-block enz enz

Dit is het vraagstuk: .../deel_1TESTscrolling.html

Dit is de wrapper:
Code: 
/* scrolling area ipv iframe nav benfrain.com/horizontal-scrolling-area-css-overflow-ios/ */
.scrolling-wrapper { 
	width: 97%; height:220px; margin-top:0px; margin-left:37px; float:left; 
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
}
.scrolling-wrapper A {
	[COLOR="#FF0000"][B]display: inline;[/B][/COLOR]
}

Dit is de tooltip:
Code: 
/* tooltip nav www.cssplay.co.uk/menu/cssplay-tooltips.html */
span.tooltip {cursor:default; z-index:100;}

[COLOR="#FF0000"][B]span.tooltip > span {display:none; position:absolute;[/B][/COLOR] border:2px solid #080; background:#fff;
 box-shadow:0 15px 10px -15px rgba(0,0,0,0.7); z-index:100;
}
span.bottomRight > span {border-radius:0 20px 0 20px; left:50%; top:40px;}

span.colGreen > span {border-color:#080;}

[COLOR="#FF0000"][B]span.tooltip span b {display:block;[/B][/COLOR] background:#080; *width:100%; margin:2px; padding:10px; color:#fff;
 [COLOR="#FF0000"][B]position:relative;[/B][/COLOR] z-index:100; overflow:hidden; font:normal 16px/1.2em Verdana, Arial, sans-serif; 
box-shadow:inset 2px 2px 5px rgba(255, 255, 255, 0.5), inset -2px -2px 5px rgba(0, 0, 0, 0.5);
}
span.bottomRight span b {border-radius:0 18px 0 18px;}

span.colGreen span b {background:#080;}


[COLOR="#FF0000"][B]span.tooltip > span:before {display:block;[/B][/COLOR] content:""; width:20px; height:20px; background:transparent;
 position:absolute;
}
[COLOR="#FF0000"][B]span.bottomRight > span:before {top:-20px; left:-2px;[/B][/COLOR]}
/*span.bottomRight.colGreen > span:before {background:url(painters/green-corner.png) no-repeat -20px 0;*/} /* niet toegepast */

span.colGreen > span:before {border-color:#080;}

[COLOR="#FF0000"][B]span.tooltip span b:before {display:block;[/B][/COLOR] content:""; width:80%; height:50px;
 background:transparent; border-radius: 100% / 50px ; [COLOR="#FF0000"][B]position:absolute; left:10%; top:-30px;[/B][/COLOR] z-index:200;
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

[COLOR="#FF0000"][B]span.tooltip:hover {position:relative;[/B][/COLOR] z-index:100;}
[COLOR="#FF0000"][B]span.tooltip:hover > span {display:block;[/B][/COLOR] white-space:nowrap;}

span.tooltip + img.close {position:fixed; left:0; top:0; width:0; height:0; z-index:99;}
span.tooltip:hover + img.close {width:100%; height:100%;}

Dit is de HTML:
HTML: 
<div class="scrolling-wrapper">
<span class="tooltip bottomRight colGreen" onmouseover = "void(0)">
<a href="#-" class="scrolling-content" target="-">
<img src="-.jpg" width="134" height="100" class="foto" alt="-" title="---TITELTEKST---">
</a><span><b>---TOOLTIPTEKST---</b></span></span><img class="close" src="signs/tt.gif" alt="" />
</div><!-- eind div scrolling-wrapper -->
The iPad, iPhone and iPod Touch require adding onmouseover = "void(0)" to the tooltip span so that a 'tap' on this text will trigger a :hover and also requires the addition of a transparent gif <img class="close" src="painters/transparent.gif" alt="" /> after the tooltip span to provide a means of closing any tooltip by 'tapping' anywhere on the screen.
Klik om te vergroten...

Weet iemand raad? Zou er heel blij mee zijn!
vriendelijke groet janyep
 
Laatst bewerkt:
Misschien heb je wat aan dit concept
Code: 
<div class="container">
Dit is wat tekst in de container
<div class="tooltip">Informatie Tooltip</div>
</div>

.container {
  width: 120px;
  height: 5em;
  margin: 50px;
  position: relative;
  z-index: 1;
  background: #cc0;
  font: normal 16px/1 arial,sans-serif;
}
.tooltip {
  padding: 2px 10px 4px 10px;
  bottom: 105%;
  left: 25%;
  position: absolute;
  z-index: 2;
  background: #f00;
  white-space: nowrap;
  visibility: hidden;
}
.container:hover .tooltip {
  visibility: visible;
}

Suc6
 
Hallo beste Bron

Sorry voor de late reactie: heel onbeschoft

maar het excuus is dat er geen seintje van het forum is binnengekomen voor uw geposte reactie

  • zal de instellingen voor het forum hier nog nakijken
  • kijk morgen naar uw suggestie, want het issue staat nog steeds op het 'doen-lijst'je

Maar zeer zeker alvast bedankt!
 
Dit is wat makkelijker te positioneren met css.
Code: 
<a class="linkje" href="javascript:void(0);" title="123">Linkje123</a>
<a class="linkje" href="javascript:void(0);" title="456">Linkje456</a>
<a class="linkje" href="javascript:void(0);" title="789">Linkje789</a>
<div class="tooltipbox"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var linkTitle;
  $(".linkje").hover(function() {
    linkTitle = $(this).attr('title');
    $(".tooltipbox").html(linkTitle);
    $(this).attr('title','');
  }, function() {
    $(".tooltipbox").html('');
    $(this).attr('title',linkTitle);
  });
});
</script>
De tooltipbox kun je dan overal zetten waar je wilt.

Have fun :)
 
Laatst bewerkt:
Dag Beste Bron,
geweldig vriendelijk dank dat u zo ver in de materie bent gedoken.

Mag ik vragen of u weet of 1 van uw 2 opties het ook doen op de Ipad?
Heb zelf geen Ipad, dus dat is tot nu toe een beetje behelpen met het schrijven van html :thumb:

Ik had in de afgelopen weken al best een mooie (= werkende ) code in elkaar geknutseld, maar die doet het helaas niet op de touchscreens.
http://onzeautovakantiesinnoorwegen.nl/deel_1TEST-03-FOTOS-MET-Bs-EN-Is.html

Dat was het geniale aan de tooltips van Stu Nicholls: ze zijn Ipad-friendly
alleen krijg ik hem niet aan de praat op de manier zoals m'n vraag al aangaf:
Kan dat eigenlijk wel: de tooltip buiten de wrapper laten verschijnen?

http://www.cssplay.co.uk/menu/cssplay-tooltips.html
 
RE: Kan dat eigenlijk wel: de tooltip buiten de wrapper laten verschijnen?
Volgens mij lukt dit standaard niet met het title="..." attribuut maar wel met een extra div zoals in mijn css voorbeeld.

In jouw geval wil je echter de tooltip van verschillende elementen op 1 plek tonen. Ik probeer altijd alles eerst met css op te lossen maar dit is mij in css niet gelukt :( dus daarom heb ik het gezocht in jQuery.

RE: of 1 van uw 2 opties het ook doet op de Ipad?
Javascript en jQuery werken goed op de iPad en ik verwacht geen probleem met de jQuery code omdat deze heel basic is. Je zult het wel zelf moeten testen want daar heb ik geen mogelijkheid toe. Misschien kun je deze vraag hieronder aan anderen stellen?

Nog wat uitleg.
href="javascript:void(0);" is een dummy zodat bij hover, click of touch alleen de tooltip wordt getoond.
In de jQuery code wordt de inhoud van het title="..." attribuut in de div getoond en de oorspronkelijke tooltip wordt niet getoond. Hierdoor is het linkje seo friendly.
 
RE: Maar het lukt ook met geen van beide om 'de ballonnetjes' op een vaste plek te laten verschijnen
Klopt. dit is niet mogelijk met html/css. Je zult het dus met jQuery (of Javascript) moeten doen zoals mijn voorbeeld code. Voor de zekerheid zet ik een compleet bestand hieronder.
Code: 
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Tooltip</title>
<style type="text/css">
body {
  height: 100%; font: normal 16px/1 arial,sans-serif;
}
.container {
  width: 80%; margin: 5% 0 0 10%; background: #ddd;
}
.container a {
  width: 30%; margin: 1.4%; padding: 30px 0; display: inline-block;
  text-decoration: none; text-align: center; background: #ff6;
}
.tooltipbox {
  width: 25%; height: 40px; margin: 3% 0 0 10%;
  padding: 10px; background: #ccc;
}
</style>
</head>
<body>
<div class="container">
  <a class="linkje" href="javascript:void(0);" title="Groente">Foto 1</a>
  <a class="linkje" href="javascript:void(0);" title="Brood">Foto 2</a>
  <a class="linkje" href="javascript:void(0);" title="Frisdrank">Foto 3</a>
</div>
<div class="tooltipbox"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var linkTitle;
  $(".linkje").hover(function(){
    linkTitle = $(this).attr('title');
    $(".tooltipbox").html(linkTitle);
    $(this).attr('title',''); //title leegmaken (geen ballon)
  }, function() {
    $(".tooltipbox").html('');
    $(this).attr('title',linkTitle); //title weer terugzetten
  });
});
</script>
</body>
</html>
Als je de ballonnetjes wilt houden moet je de 2 regels weghalen die beginnen met $(this).attr
 
Laatst bewerkt:
Helemaal geweldig hoeveel tijd mensen in andermans sores steken!
Nou ja: sores, het is vooral nieuwsgierigheid om het tiptop in elkaar te knutselen
èn het is maar een hobby hoor

Maar hij doet het niet zoals bedoeld ...
ik durf het bijna niet te zeggen ...
maar ik bedoel een opgemaakte tooltip met kleurtjes en randen etc., die op een vaste plek boven aan de pagina ( ergens ) verschijnt.

Zoals op http://onzeautovakantiesinnoorwegen.nl/deel_1TEST-03-FOTOS-MET-Bs-EN-Is.html
echter deze is aan het eind van het liedje niet Ipad-vriendelijk.

Dus zoek ik naar een trucje voor de eerste optie, deze tooltips doen het keurig op de Ipad maar verschijnen op de verkeerde plek
= tweede fotorij
= http://onzeautovakantiesinnoorwegen.nl/deel_1TESTscrolling.html

tooltip naar vaste plek.jpg
 
een sugestie beste bekijk eens
http://www.djdb.be/newsite2/vieuwport.php?content=info/elektronica
menu rechts voor css3

klik ook eens op "linken" en dan moet je met firebug maar eens kijken naar de code(als je over een vierkantje gaat)(je kan ook eens je scherm kleiner maken)


Code: 
#submenu{position:absolute;right:-15px; top:0px; z-index:20;
          width:15px;
          overflow: hidden;
          box-shadow: 0px 0px 3px #7892BD, 0 10px 15px #FFF3AF inset;
          padding: 15px;
		  border-radius:10px 2px 2px 10px;
              border:1px solid #E0E8F1;
	box-shadow: 0px 0px 3px  #E0E8F1, 0 10px 15px #FFF3AF inset;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}
#submenu:hover{position:absolute;right:-15px; top:0px; z-index:20;
          height:150%; min-height: 45%; width:150px; margin-left: 10px;
          
          box-shadow: 0px 0px 3px #7892BD, 0 10px 15px #FFF3AF inset;
          padding: 20px;
		  border-radius:10px 2px 2px 10px;
              border:1px solid #E0E8F1;
	box-shadow: 0px 0px 3px  #E0E8F1, 0 10px 15px #FFF3AF inset;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan