Pit: Tooltip selber bauen

Hi,

nachdem ich schon einige Tooltip-Plugins nutze und mehr oder eher weniger glücklich damit bin und nachdem ich auch schon für kleinere Tooltips selber welche gebaut habe, frage ich mal in die Runde, wie Ihr Tooltips realisiert (wenn Ihr das denn macht).

Ich möchte grad nicht über die Sinnhaftigleit von Tooltips diskutieren, das habe ich für mich bereits entschieden.

Ich habe einen Block, den ich gerne mit kurzem delay einblenden möchte und nutze bereits jquery und ui.

.tooltip steht per default auf display:none.

Wie würdet Ihr den einblenden (bei mouseover). Wie gesagt, leicht zeitverzögert und was mir wichtig wäre, dass der Block rechts neben dem auslösenden Element eingeblendet wird, bzw. wenn der Platz nicht ausreicht, dann links neben dem auslösenden Element.

<div class="tooltip">
    <span id="a1_2">
    <div class="container">
	<header>Header</header>
    <div>Titel:</div> <div>Titel</div>
    <div>Zeile1</div> <div>Zeile</div>
    <div>Zeile2</div> <div>Zeile</div>
    <div>Zeile3</div> <div>Zeile</div>
    <div>Zeile4</div> <div>Zeile</div>
    <footer>footer</footer>
    </div>
    </span>
  </div>

Pit

  1. @@Pit

    wie Ihr Tooltips realisiert (wenn Ihr das denn macht).

    Inclusive ComponentsTooltips & Toggletips

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. Hallo Pit,

    welchen Sinn hat denn dein (falsch) verschachteltes span?

    Viele Grüße
    Robert

    1. Hallo Pit,

      welchen Sinn hat denn dein (falsch) verschachteltes span?

      Viele Grüße

      Hi Robert,

      hast recht, kann raus. Aber inwiefern falasch verschachtelt?

      Pit

      1. Hallo

        welchen Sinn hat denn dein (falsch) verschachteltes span?

        hast recht, kann raus.
        Aber inwiefern falsch verschachtelt?

        Das span als solches ist ein Inlineelement und darf seinerseits keine Blockelemente sondern nur Phrasing Content beïnhalten.

        Tschö, Auge

        --
        Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
        Toller Dampf voraus von Terry Pratchett
  3. Hallo,

    ich habe mal einen fiddle erstellt, in dem würde ich gerne bei mouseover einen Container als Tooltip anzeigen.

    Mir gelingt das nicht.

    Pit

    1. @@Pit

      ich habe mal einen fiddle erstellt, in dem würde ich gerne bei mouseover einen Container als Tooltip anzeigen.

      Mir gelingt das nicht.

      Ich habe kein mouseover. Mir gelingt das nicht, dein Tooltip zu sehen.

      Wozu hatte ich dir verlinkt, wie man’s richtig macht?

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. Hi Gunnar,

        Ich habe kein mouseover. Mir gelingt das nicht, dein Tooltip zu sehen.

        Soll ichs auf einen Klick umbauen? Das Problem bliebe dasselbe.

        Wozu hatte ich dir verlinkt, wie man’s richtig macht?

        Das habe ich mangels Englischkenntnisse nicht vertanden. 😟

        Pit

        1. @@Pit

          Ich habe kein mouseover. Mir gelingt das nicht, dein Tooltip zu sehen.

          Soll ichs auf einen Klick umbauen? Das Problem bliebe dasselbe.

          Nicht ganz. Auf Touchgeräten sollten Clicks funktionieren.

          Tastaturbedienung: immer noch Fehlanzeige, wenn das Bedienelement nicht per Tastatur erreichbar ist. Weil es ein div ist.

          Merke: Niemals nicht-interaktive Elemente als Target für click-Events vorsehen. Für sowas sind buttons zu verwenden

          Wozu hatte ich dir verlinkt, wie man’s richtig macht?

          Das habe ich mangels Englischkenntnisse nicht vertanden. 😟

          Das ist aber schlechte Voraussetzungen für einen Webentwickler.

          Zumindes den Codepen darin hättest du dir mal ansehen können.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. Gunnar, mind your bedside - oops, sorry - deskside manners! ;-)

            Was Pickering da beschreibt, ist durchaus anspruchsvoll.

            Abgesehen davon sind Englischkenntnisse keine Existenzvoraussetzung. Selbst in England nicht (oder warum liest man so viele Erklärungstexte zu lie/lie/lay oder their/there oder it's/its oder site/sight oder oder...). Und in SelfHTML, der DEUTSCHEN REFERENZ, schon gar nicht. Aber das Thema ist ja nicht neu...

            Wäre Pickering wohl einverstanden mit einer deutschen Übersetzung seines Blogs im Self Wiki? Natürlich mit demütiger Reverenz zu ihm?

            Rolf

            --
            sumpsi - posui - clusi
            1. Hi Rolf,

              danke.

              Was Pickering da beschreibt, ist durchaus anspruchsvoll.

              Abgesehen davon sind Englischkenntnisse keine Existenzvoraussetzung. Selbst in England nicht (oder warum liest man so viele Erklärungstexte zu lie/lie/lay oder their/there oder it's/its oder site/sight oder oder...). Und in SelfHTML, der DEUTSCHEN REFERENZ, schon gar nicht. Aber das Thema ist ja nicht neu...

              Ich glaube, mir würde es vom Anspruch her schon in Deutsch nicht ganz leicht fallen, aber ich würds versuchen. So habe ich nach kurzer Durchsicht das Handtuch geworfen.

              Pit

            2. Hallo Rolf B,

              Wäre Pickering wohl einverstanden mit einer deutschen Übersetzung seines Blogs im Self Wiki? Natürlich mit demütiger Reverenz zu ihm?

              Gute Idee, soll @Gunnar Bittersmann ruhig mal fragen.

              Bis demnächst
              Matthias

              --
              Rosen sind rot.
              1. Hallo Matthias,

                und dass ich mir da ein <I> gekauft habe, ist mir durchaus klar…

                Rolf

                --
                sumpsi - posui - clusi
        2. Ich verstehe bei englisch auch nur Bahnhof, bin aber mit Gunnar einer Meinung, daß das anschauen des Codepens dich weiter bringen kann. Kopier einfach mal den Code und schau was bei dir rauskommt. Manches wird auch verständlicher wenn du das ganz im Browser (Inspektor) untersuchst: da gehen doch des öfteren Lichter auf -> aahhh so funktioniert das.