Ein Tooltip und eine Reihe von Problemen

Computer: Software & Programmierung HTML & CSS
#1

Ich habe folgenden Tooltip Code aus einem Tutorial geborgt und für meine Ansprüche etwas modifizeirt:

a.tooltip span
{
display:none;
padding:3px 5px;
margin-left:20px
}
a.tooltip:hover span
{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #B2B299;
color:#6c6c6c;
border-radius:8px
}

Verwenden möchte ich Tooltips in der Kopfzeile meiner Tabelle, um weitere Informationen zur jeweiligen Spalte zur Verfügung stellen zu können:

Spaltenname [(Ein Infobutton)Weitere Info](%23)

Nun habe ich leider einige Probleme.

Opera 11.50:
Wenn ich den Mauszeiger über den Infobutton bewege wird neben dem Tooltip auch die Link Adresse unter dem Mauszeiger angezeigt. Diese überdeckt den Tooltip. Lässt sich die Anzeige der Linkadresse für Tooltips deaktiveren? Wie kann ich meinen Tooltip oberhalb des Infobuttons positionieren? Bei der Verwendung von „margin-bottom“ tut sich leider nichts.

IE9:
Die Ecken werden nicht abgerundet. Laut meiner Rechechere sollte IE9 mit „border-radius“ aber zureckt kommen. Ebenfalls „hüpft“ der Inhalt der Tabelle etwas nach rechts, sobald der Mauszeiger über den Infobutton bewegt wird, was sehr unschön aussieht. Wie lässt sich dies verhindern?

#2

Hallo,

Ich kann verstehen, wenn man bestimmte Vorstellungen umsetzen möchte, aber wie du festgestellt hast, spielen beide genannten Browser nicht ganz mit.

Auch wenn es für einen schwer ist, trenne dich von einem komplizierten Design und verzichte auf die Tooltipps, wie du sie angehst!

Ein Tooltipp beinhaltet in der Regel sehr wenig Text. Sind deine Spaltennamen/-bezeichnungen so uninformativ?

Es kann nicht das Ziel sein, wenn du für jeden Browser eine Extrawurst machst, nur damit alle es gleich darstellen.

-> http://de.wikipedia.org/wiki/Tooltip

In der textbasierten Auszeichnungssprache HTML gibt es diverse Möglichkeiten, um Tooltips zu verwenden, zum Beispiel durch das title-Attribut, das Meta-Informationen zum Element angibt.[2] Die Formatierung des Inhaltes, d. h. das Aussehen des Tooltips, kann vom Browser beeinflusst werden und sich dadurch von Browser zu Browser unterscheiden.

Was du erzwingen willst, ist ein Kampf gegen Windmühlen :wink:

-> http://de.selfhtml.org/html/attribute/allgemeine.htm…
(siehe title )

Bleibe einfach und überfrachte das Design nicht und erzwinge keine unbedeutenden Details :wink:

Grüße Roman

#3

Ich wollte Tooltips verwenden, um themenbezogene Abkürzungen, welche ich aus Platzgründen in den Spalten verwenden muss, zu erklären. Für die meisten Benutzer sind diese Abkürzungen zwar sofort verständlich, zusätzlich Tooltips zur Erklärung wären m.E. ein netter Service.

Was mich doch sehr wundert sind die „hüpfenden“ Spalten und nicht abgerundeten Ecken in IE9. Kopiere ich den PHP generierten Quellcode aus IE9 und speichere diesen in eine neue .html Datei, um diese dann erneut in IE9 zu öffnen, sind beide Probleme verschwunden! Für mich ist dieses Verhalten nicht nachvollziehbar.

#4

Kann am zeichensatz liegen , irgentwelche versteckten zeichen weil flasch utf-8 kodiert etc.

#5

Ich hatte - wohl versehentlich - den Kompatibilitätsmodus aktiviert. Mit deaktiviertem Kompatibilitätsmodus wird mein Tooltip nun korrekt dargestellt, dafür sieht die Schrift nun unsauberer als zuvor aus. Naja, egal!