Ergebnis 1 bis 4 von 4

HTML-Hilfetext vergrößern

  1. #1 Zitieren
    Retro Micky Avatar von Blue Force
    Registriert seit
    May 2009
    Beiträge
    26.192
    Mit "title" kann man ja einen Hilfetext angeben, der erscheint wenn man mit der Maus ein paar Sekunden über dem betreffneden Element bleibt.
    Bsp:
    Code:
    <div title="Volvo ist eine schwedische Automarke">Volvo</div>
    Kann mann diesen Hilfetext irgendwie größer anzeigen lassen?
    Blue Force ist offline

  2. #2 Zitieren
    Krieger Avatar von Lain
    Registriert seit
    Oct 2008
    Beiträge
    409
    Wenn Javascript eine Option ist, könntest du z.B. mit onmouseover/onmouseout ein div zwischen display: inline/block und display: none auf der Position der Maus toggeln lassen. Für dieses div könntest du dann ganz gewohnt mit CSS die Schriftgröße und auch alles andere vom Erscheinugnsbild festlegen. Wie man speziell das title-Attribut modifziert, weiß ich nicht; k.A., ob es überhaupt möglich ist.
    Lain ist offline

  3. #3 Zitieren
    Ehrengarde Avatar von Ewige Finsternis
    Registriert seit
    Sep 2008
    Beiträge
    2.659
    Nein, soweit ich weiß kannst du das title-Attribut nicht stylen. Das hat den Hintergrund dass die Gestaltung dieser Elemente vom Browser abhängt.

    Es gibt auch Workarounds ohne die Verwendung von JS, nur mit CSS. Dazu definierst du deinen gewünschten Tooltiptext als <span> innerhalb deines divs.

    Code:
    <div class="mitTooltip">Text<span>Gestylter Tooltip</span></div>

    Der folgende CSS-Code baut dir aus dem <span> eine Art Textbox, die beim Überfahren des <div> unterhalb des Textes sichtbar wird.

    Code:
    .mitTooltip {
        text-decoration: none    
    }
    
    .mitTooltip:hover {
        cursor: help;
        position: relative
    }
    
    .mitTooltip span {
        display: none
    }
    
    .mitTooltip:hover span {
        border: #c0c0c0 1px dotted;
        background-color:#DDDDDD;
        padding: 5px 20px 5px 5px;
        display: block;
        z-index: 100;
        left: 0px;
        margin: 10px;
        width: 250px;
        position: absolute;
        top: 10px;
    }
    Unter ..mitTooltip:hover span kannst du jetzt beliebiges Styling für den Tooltiptext hinzufügen.


    Ewige Finsternis ist offline

  4. #4 Zitieren
    Retro Micky Avatar von Blue Force
    Registriert seit
    May 2009
    Beiträge
    26.192
    Zitat Zitat von Lain Beitrag anzeigen
    Wenn Javascript eine Option ist, könntest du z.B. mit onmouseover/onmouseout ein div zwischen display: inline/block und display: none auf der Position der Maus toggeln lassen. Für dieses div könntest du dann ganz gewohnt mit CSS die Schriftgröße und auch alles andere vom Erscheinugnsbild festlegen. Wie man speziell das title-Attribut modifziert, weiß ich nicht; k.A., ob es überhaupt möglich ist.
    Danke, ich habe es damit genauso hinbekommen, funktioniert super
    Spoiler:(zum lesen bitte Text markieren)
    Code:
    <script type="text/javascript">
      function showHelp(){
        document.getElementById("helpdiv").style.display = "inline-block";
      }
    
      function hideHelp(){
        document.getElementById("helpdiv").style.display = "none";
      }
    </script>
    
    <style type="text/css">  
      #helpdiv {
        position:absolute;
        left:40px; top:20px; height:auto; width:auto;
        padding:5px;
        color:#000000;
        background-color:#f4f4f4;
        font-size:1.2em;
        font-family:Tahoma;
      }
    </style>
    
    
    
    <span onmouseover="showHelp()" onmouseout="hideHelp()">
      Volvo
    </span>
    
    <div id="helpdiv"  style="display:none">
      Volvo ist eine schwedische Automarke
    </div>




    @ewige Finsternis
    danke, daß das auch nur mit CSS geht hätte ich nicht gedacht.
    Blue Force ist offline Geändert von Blue Force (05.06.2016 um 22:06 Uhr)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •