Bootstrap popover auf svg

Laut w3schools.com, um ein popover erscheint neben einem link, alles was ich brauche, zu verwenden, ist dies HTML:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

Meine Frage ist: Wie würde ich eine popover angezeigt, wenn ich auf ein svg-element? Ich versuchte dies:

<svg width="100" height="100">
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </a>
</svg>

Im Prinzip alles, was ich Tat, war-stick eine svg-Form in den link, aber es funktioniert nicht.
Wie mache ich ein popover angezeigt, wenn ich auf ein svg?

Jegliche Hilfe würde sehr geschätzt werden.

InformationsquelleAutor CyberBurst | 2016-11-21

 

4 Replies
  1. 11

    Dachte ich, die Lösung. Wenn ein popover, bootstrap generiert ein div-element innerhalb des übergeordneten Containers. Es ist offensichtlich, dass nicht richtig funktioniert, wenn Ihr innerhalb eines svg. So, hier ist die Lösung, geben Sie es ein data-container set als body Sie können auch loszuwerden, die einem element, und fügen Sie es einfach direkt an die Kreis-element.

    <svg width="100" height="100">
      <a data-toggle="popover" data-container="body" title="Popover Header" data-content="Some content inside the popover" data-placement="right">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
      </a>
    </svg>
    
    
    <script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();   
    });
    </script>
    • Das problem ist, ich möchte mehrere verschiedene svg-Formen haben unterschiedliche popovers. Und ich brauche alle Formen werden innerhalb eines svg-Elements.
    • CyberBurst habe ich aktualisiert meine Antwort, und es funktioniert jetzt. Es wird Ihnen erlauben, um es für jede Form eine eigene popover 🙂
  2. 1

    Verschieben von Daten-toggle=“popover“ title=“Popover-Header“ data-content=“Einige Inhalte innerhalb des popover“ im SVG-Format.Wird es funktionieren.

    • Während dies funktioniert, möchte ich wirklich die Daten-toggle=“popover“ und so weiter, auf meine Kreis-element. Und wenn ich es in den Kreis, es funktioniert immer noch nicht.
    • Dies versuchen. Wenn Sie anrufen, popover geben-container als Körper.
    • $(‚[data-toggle=“popover“]‘).popover({container:’body‘});
  3. 1

    Es war nicht klar, um mich von der akzeptierten Antwort oben, aber Sie können jede Art von element in der data-container="". Zum Beispiel, wenn Sie Ihre SVG-Leben im inneren einige <div class="svg-container></div> Sie können diese Klasse als Wert für die ‚Daten-container‘, wie dieser:
    data-container=".svg-container". Das ist besser, als data-container="body" als Wert, da in diesem Fall alle popovers werden in den unteren Rand des Körpers mit einigen unerwünschte/unerwartete Verhalten (z.B., wenn die Seite geändert wird).

  4. 0

    Versuchen, setzen Sie diese in Ihrem Skript-tag

    $("circle").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'});

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.