Tooltip wird abgeschnitten

[papaver]

Hallo zusammen,
die Anzeige meiner Tooltips im Content-Bereich, wird vom umgebenden div-container abgeschnitten. Das heißt konkret, sobald der Tooltip in den Header bzw. Footer-Bereich hineinreicht, wird er abgeschnitten.

<script type="text/javascript">
$(document).ready(function () {
 $('div.thumbnail-item').mouseenter(function(e) {

  x = e.pageX - $(this).offset().left;
  y = e.pageY - $(this).offset().top;

  $(this).css('z-index','15')
  .children("div.tooltip")
  .css({'top': y - 150,'left': x - 50,'display':'block'});
   
 }).mousemove(function(e) {
 
  x = e.pageX - $(this).offset().left;
  y = e.pageY - $(this).offset().top;
 
 }).mouseleave(function() {
 
  $(this).css('z-index','1')
  .children("div.tooltip")
  .animate({"opacity": "hide"}, "fast");
 });

});
</script>

Habe versucht das Problem mit appendTo('body') bzw append zu lösen, doch dann wird der per php-generierte tooltip-Inhalt nicht mehr richtig angezeigt, und alle Tooltips erscheinen in der oberen linken Bildschirmecke.

Welche Möglichkeit gibt es die Tooltips vollständig, auch außerhalb des umgebenden div-containers (content) anzeigen zu lassen?

 

[Myhar]

AW: Tooltip wird abgeschnitten

Ist der tooltip absolut positioniert? (Wovon ich mal ausgehe, sonst würdest du nicht die Koordinaten berechnen) Ich denke, das Problem ist eher ein CSS als ein JS Problem. Wenn Elemente einfach abgeschnitten werden, hat das meist etwas mit overflow:hidden zu tun.
Auch ist mir nicht klar, wieso die Tooltips nicht mehr funktionieren, wenn du sie an den Body anhängst. Allerdings musst du dein JS dann acuh dementsprechend anpassen. Ein .children(".tooltip") funktioniert dann nicht mehr, du musst diese dann anders ansprechen.
Es wäre als sehr hilfreich, wenn wir uns das Gesamtproblem (HTML,JS,CSS) einmal ansehen könnten.

 

[papaver]

AW: Tooltip wird abgeschnitten

Hallo Myhar,
hier http://jsfiddle.net/SWs3P/1/
kann man das Problem sehr gut erkennen

Die Lösung die ich anstrebe wäre, das der Tooltip genau über dem parent-image öffent, deshalb habe ich auch dieser Variante versucht
http://jsfiddle.net/DkUPL/1/
Leider kann man auf jsfiddle, nicht die Reaktion sehen wie auf meiner test-homepage. Hier wird zwar der Tooltip geöffnet, auch ausserhalb des Content-divs, doch es wird immer das gleiche image und der gleiche falsche Text im Tooltip gezeigt.

vielen Dank!

 

[Duddle]

AW: Tooltip wird abgeschnitten

#content hat "overflow: hidden" und hat eine feste Größe. Da die Thumbnails und ihre Tooltips darin eingebettet sind wird alles was über den Bereich von #content herausgeht versteckt.

Lösung: overflow-Zeile entfernen.


Duddle

 

[papaver]

AW: Tooltip wird abgeschnitten

Hallo Duddle,
leider funktioniert die Lösung nur auf jsfiddle ... es wäre so logisch gewesen!
Habe alle overflow:hidden's entfernt - aber es funktioniert nicht.
Kann es eventuell daran liegen, das es sich um eine Wordpress-Seite handelt?

 

[Duddle]

AW: Tooltip wird abgeschnitten

Es gibt zu viele Faktoren, die da reinspielen können. Verlink die Seite hier, oder, falls du das nicht kannst, erstell eine Kopie davon mit Blindtext und lad sie irgendwo hoch.

Ansonsten ist das eine Frage von CSS und HTML, diese Frage gehört also eigentlich in ein anderes Unterforum.


Duddle

 

[papaver]

AW: Tooltip wird abgeschnitten

Hallo Duddle,
ursprünglich war mein Lösungsansatz, das Problem mittels appendTo bzw. append zu lösen - gibt es hier keine Möglichkeit?
papaver

 

[Duddle]

AW: Tooltip wird abgeschnitten

Das hat überhaupt nichts mit dem Script zu tun. Nichts.
Dein Fehler liegt im CSS/HTML.


Duddle

 

[cebito]

AW: Tooltip wird abgeschnitten

ursprünglich war mein Lösungsansatz, das Problem mittels appendTo bzw. append zu lösen - gibt es hier keine Möglichkeit?

Es gibt zu viele Faktoren, die da reinspielen können.

Wie Duddle schon sagt spielen da zu viele Faktoren mit rein um ohne Quellcode eine Aussage zu treffen. Deshalb nochmal Duddle

Verlink die Seite hier, oder, falls du das nicht kannst, erstell eine Kopie davon mit Blindtext und lad sie irgendwo hoch.

Das macht es allen potentiellen Helfern um einiges leichter

... und ja, ist kein PHP oder sonstiges Scriptproblem, ich verschieb dich mal...

 

[papaver]

AW: Tooltip wird abgeschnitten

Hallo zusammen,
ihr habt Recht es ist ein CSS Problem - und zwar kollabiert die Scrollpane
http://jscrollpane.kelvinluck.com/basic.html
mit der Tooltip-Anzeige.
Die Scrollpane benötigt ein "overflow:auto" ...
ich brauche allerdings definitiv eine scrollpane, genau mit dieser schlichten Balkenanzeige.

Welche Möglichkeit gibt es die Tooltip-Anzeige mit jQuery oder Co entsprechend zu manipulieren?

Und hier der aktualisierte jsfiddle mit integriertem scrollpane
http://jsfiddle.net/SWs3P/4/

 

[Myhar]

AW: Tooltip wird abgeschnitten

Wenn du deine overflow Eigenschaften nicht verändern kannst/willst, dann wirst du wohl deine Tooltip Funktion umschreiben müssen. Ich erachte es auch nicht als sinnvoll, die Tooltips mittels appendTo an den body zu hängen, sondern gleich von Beginn dort auszugeben. Auch geht dir ja die Verbindung vom Tooltip-Element und dem Tooltip verloren, wenn du sie so, wie sie jetzt sind, an den body hängst.

<body>

<!-- Hier ist dein eigentlicher Seitenaufbau inklusive scrollpanes etc -->

<div id="tooltip1">
<!-- Was auch immer in deinem Tooltip zu finden ist -->
</div>
</body>

Damit hast du die Möglichkeit, deine Tooltips absolut überall zu positionieren, wo du willst. Jetzt musst du nur eine Verbindung zwischen deinem hover-Element und dem Tooltip schaffen. Eine Möglichkeit wäre zB über eine eigene CSS Klasse für jedes Element, was jedoch nicht sehr "schön" ist. Besser finde ich die Verwendung vom data- Attribut für diesen Zweck. Das könnte zB so aussehen:

<body>

<div class="tooltip" data-tooltip="tooltip1">
</div>


<div id="tooltip1">
<!-- Was auch immer in deinem Tooltip zu finden ist -->
</div>

<body>

Dadurch hast du die Verbindung von deinem Element und dem tooltip geschaffen, jetzt muss "nur noch" per JS der Tooltip aktiviert werden.

$(".tooltip").on("hover",function(){
   tooltipID = $(this).data("tooltip"); //Sollte tooltip1 beim ersten Tooltip sein
   $("#" + tooltipID).show(); //Tooltip wird eingeblendet
});

Mein Beispiel ist bewusst unvollständig, ich habe hier nur gezeigt, wie du dein div dann ansprechen kannst. Du musst es natürlich noch korrekt positionieren und stylen.