Ist es möglich, zur Verbesserung der Standard-Darstellung von svg-Titel tooltip

Möchte ich ändern das standardmäßige Aussehen der tooltip in der svg-Elemente (Titel) mit allen Mitteln wie js oder css.

Ich habe sogar versucht, Sachen wie diese:

var title = document.createElementNS('http://www.w3.org/2000/svg','title');
title.textContent='<foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml"><div style="background:blue;">'+arr[j].ypos+'</div><foreignObject>';
rect.appendChild(title);

aber egal was ich einfügen, da der textContent der Titel, einfach dargestellt, als ein string.

Gibt es eine Möglichkeit, um Stil der Standard-tooltip? Andere einfache und unkomplizierte alternativen zum erstellen von QuickInfos in svg ohne plugins sind auch willkommen...

InformationsquelleAutor T J | 2014-02-11
  1. 5

    Könnten Sie versuchen, diese: So ändern Sie den Stil des Title-Attributs innerhalb des Anker-Tags?. Ich habe nicht testen Sie es, so dass ich nicht wirklich wissen, ob es funktioniert.

    Aber da Sie mithilfe von SVG, die Sie tun können, besser als dass, da Sie zeichnen können tooltips mit jeder Farbe und Form, sogar animiert. Da erzeugt es dynamisch über ein Skript, können Sie berechnen die Größe basierend auf dem Inhalt und ändern Sie die Höhe und Breite entsprechend.

    Hier ist ein Beispiel für einen tooltip mit einem abgerundeten Rechteck in SVG:

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <g id="component">
        <rect id="content" width="50" height="50">
        </rect>
        <g class="tooltip" transform="translate(20,20)" opacity="0.9">
            <rect rx="5" width="100" height="25"></rect>
            <text x="15" y="16">Hello</text>
        </g>
    </g>
</svg>

    Ich CSS hover erscheinen zu lassen und zu verschwinden:

    #component .tooltip {visibility: hidden}
#component:hover .tooltip {
    visibility: visible;
}
.tooltip text {
    fill: black;
    font-size: 12px;
    font-family: sans-serif;
}
.tooltip rect {
    fill: yellow;
    stroke: blue;
}

    Können Sie Experimentieren mit es in diesem JSFiddle.

    Können Sie auch speichern Sie Ihre tooltips in einer <defs> - block, und Wiederverwendung es in verschiedenen Objekten.

    • Dies ist-geil optisch, aber wie es scheint, von nicht mit ist - <title> tags Sie sind somit die Zugänglichkeit Ihrer SVGs, sind Sie nicht? Es gibt tooltips, und dann gibt es alternativen text für sehbehinderte. Zwei verschiedene Dinge. sitepoint.com/tips-accessible-svg
    • Sie konnte beides haben, hinzufügen title zu <rect> und deaktivieren von pointer-events aufrect {pointer-events: none}). Das title-Attribut kann noch gelesen werden, aber es wird nicht angezeigt als tooltip schweben da die rect nicht der Erfassung von Ereignissen, sondern die Eltern #container wird, zeigt ein tooltip auf hover.
    InformationsquelleAutor helderdarocha
Schreibe einen Kommentar