XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Tooltip-Breite dem Inhalt anpassen (http://xhtmlforum.de/showthread.php?t=66798)

*pi 02.02.2012 13:47

Tooltip-Breite dem Inhalt anpassen
 
Hallo zusammen,

ich sitze seit gestern Abend an folgendem Problem und finde dafür einfach keine Lösung, die mich zufrieden stellt:

Ich habe einen Tooltip, der verschieden lange Inhalte annehmen kann. Der Tooltip soll sich in seiner Breite dem Inhalt anpassen, jedoch nur bis zu einer Maximalbreite von 350 Pixeln. Dem Tooltip einfach „max-width: 350px;“ zuzuordnen, löst mein Problem leider nicht. Und „min-width“ möchte ich nicht benutzen, denn dann ist der Tooltip eventuell länger, als sein Inhalt.

Hier mein aufs Wesentliche zusammengefasstes HTML-Markup + CSS-Angaben:

HTML-Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tooltip</title>
<style type="text/css">
#page {
        margin: 0 auto;
        padding: 300px;
        width: 500px;
}
a.tooltip-wrapper:link, a.tooltip-wrapper:visited {
        position: relative;
        z-index: 2;
}
a.tooltip-wrapper:hover {
        z-index: 4;
}
a.tooltip-wrapper .tooltip {
        display: none;
}
a.tooltip-wrapper:hover .tooltip {
        background-color: #fff;
        border: 1px solid #000;
        bottom: 2em;
        display: block;
        left: 30%;
        padding: 10px;
        position: absolute;
        z-index: 99;
}
a.tooltip-wrapper .tooltip-title {
        display: block;
        font-weight: bold;
}
a.tooltip-wrapper:hover .tooltip strong {
        display: block;
}
</style>
</head>

<body>
<div id="page">
        <a href="#" class="tooltip-wrapper">Link 1<span class="tooltip"><span class="tooltip-title">Tooltip Überschrift 1</span><strong>Subline</strong>Info 1<br />
        Hier folgt ein Detailtext.</span></a><br>
        <a href="#" class="tooltip-wrapper">Link 2<span class="tooltip"><span class="tooltip-title">Längerer Tooltip Überschrift 2</span><strong>längere Subline</strong>längere Info 2<br>
        Hier folgt ein langer Detailtext, der mehr Zeichen behinhaltet, als der erste Tooltip.</span></a><br>
</div>
</body>
</html>

Google hat mir leider keine passenden Lösungen geliefert, ich hoffe jemand von euch kann mir weiterhelfen.

Viele Grüße

fricca 02.02.2012 19:42

Im Moment werden die Tooltipps nicht breiter, weil die Links als Containing Block nur eine geringe Breite vorgeben. Das ändert sich z.B., wenn man die Links auf display:block setzt.
Werden die Links denn wirklich inline sein? Und das ganze Ding nur 500px breit?

IChao 02.02.2012 19:53

Ich habe es gerade mit display: table für .tooltip-wrapper versucht, dann den Text nach dem <strong> in ein <em> gepackt, diesem <em> display:block und max-width gegeben.

@*pi, kannst du bitte bei solchen Fragen einen Link auf deine Beispielseite liefern, statt nur Code?

fricca 02.02.2012 20:02

Zitat:

Zitat von IChao (Beitrag 510803)
Ich habe es gerade mit display: table für .tooltip-wrapper versucht,

Ist der .tooltip-wrapper dann noch zuverlässig Containing Block für die absolute Positionierung? Ich glaube mich zu erinnern, dass das im FF nicht klappt(e).

Mir würde bei dieser Konstruktion gerade nur einfallen, in span.tooltip ein weiteres Element hineinzuschachteln; beide werden absolut positioniert, der äußere hat die gewünschten 350px als Breite, der innere darf shrinken.

*pi 02.02.2012 20:08

@Corina: Vielen Dank für deine Antwort. Die CSS-Angaben für den div#page habe nur schnell vergeben, damit die Links in dem Beispiel möglichst horizontal mittig sitzen. Im Nachhinein betrachtet, hätte wahrscheinlich auch ein einfaches "text-align: center;" gereicht;).

@Ingo: Vielen Dank für deinen Input. Ich habe eine Beispielseite online gestellt, die ziemlich genau den späteren Zustand zeigt: Tooltip Beipsiel.

Die Links sollen später in einer 200 Pixel breiten Spalte nebeneinander aufgelistet werden. Insofern fällt "display: block;" für die Links m. E. weg und "display: inline-block;" lässt die Links leider sehr unschön umbrechen.

IChao 02.02.2012 20:13

@Corina: stimmt. Fx mag das nicht, was in Chrome funktionierte. Irgendeiner mag die Weite in Tabellen immer nicht.

Übrigens hatte ich mich vertippt. ich meinte, dem .tooltip display:table zu geben.

IChao 02.02.2012 20:31

falls das nun verwirrend war, sorry. Hier das Beispiel für Chrome (nicht Fx).

Code:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tooltip</title>
<style type="text/css">
#page {
        margin: 0 auto;
        padding: 300px;
        width: 500px;
}
.tooltip-wrapper:link,
.tooltip-wrapper:visited {
        position: relative;
}

.tooltip-wrapper .tooltip {
        display: none;
}
.tooltip-wrapper:hover .tooltip {
        background-color: #fff;
        border: 1px solid #000;
        bottom: 2em;
        display: table;
        left: 30%;
        padding: 10px;
        position: absolute;
        z-index: 1;
}
.tooltip-wrapper span,
.tooltip-wrapper em,
.tooltip-wrapper strong {
        display: block;
}

.tooltip span {
  max-width: 250px;
}

</style>
</head>

<body>
<div id="page">
        <a href="#" class="tooltip-wrapper">Link 1<span class="tooltip"><strong>Tooltip Überschrift 1</strong><em>Subline</em><span>Info 1<br />
        Hier folgt ein Detailtext.</span></span></a><br>
        <a href="#" class="tooltip-wrapper">Link 2<span class="tooltip"><strong>Längerer Tooltip Überschrift 2</strong><em>längere Subline</em><span>längere Info 2<br>
        Hier folgt ein langer Detailtext, der mehr Zeichen behinhaltet, als der erste Tooltip.</span></span></a><br>
</div>
</body>
</html>


gato 02.02.2012 20:37

Zitat:

Zitat von fricca (Beitrag 510804)
Ist der .tooltip-wrapper dann noch zuverlässig Containing Block für die absolute Positionierung? Ich glaube mich zu erinnern, dass das im FF nicht klappt(e).

Das E darfst du aus der Klammer nehmen. Dieser Fehler ist seit der aktuellen Version (10) Geschichte. Ebenso wurde margin-collapsing mit Tabellen endlich korrigiert.

fricca 02.02.2012 20:39

Zitat:

Zitat von IChao (Beitrag 510806)
Übrigens hatte ich mich vertippt. ich meinte, dem .tooltip display:table zu geben.

Ach so. Ich war schon verwirrt.
Doch auch so bin ich irritiert: Warum zeigt Chrome ein anderes shrink-to-fit-Verhalten, wenn das Element zur abs. Positionierung noch display:table dazubekommt?
Das ist mir gerade zu hoch. Erstmal was essen ...

IChao 02.02.2012 20:44

ah. CSS3 zur Rettung. Für Firefox dürfen wir uns hier über Folgendes freuen:


Code:

.tooltip-wrapper:hover .tooltip {

... siehe oben ...

        width: -moz-max-content;
}

@Corina: S. 166 ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:49 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023