Bootstrap Popover auf das Bild

Also ich habe eine Liste von icons, ich bin versucht, um ein popover zu aktivieren, wenn Sie den Mauszeiger über ein Symbol, ich kann nicht scheinen, um es zu arbeiten, jede mögliche Hilfe würde geschätzt.

<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>

Und ich habe diese in eine separate js-Datei

$('.icon').popover({placement:'top'});

InformationsquelleAutor Brandon Charles | 2013-02-07

  1. 3

    dieser ist über ein Jahr zu spät, aber ich fand diese arbeiten:
    Fiddler Link

    mit diesem JS:

    $(function(){
    $('[data-toggle=popover]').popover({
      trigger: 'focus',
      html: true,
      title: 'Toolbox'
}) 
});

    Und das html:

            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS-eTmHxgicEfq4K-sEz_X52cq56uBP2l8cr_q8ivOavSIca5TYtQ"
        data-toggle="popover" tabindex="50" data-content="test <b>text</b>" data-placement="right"/>

    Müssen Sie erlauben, das Bild zu akzeptieren, den Fokus mit der tabindex-Eigenschaft. Das war der Schlüssel für mich. Entfernen Sie die "trigger: 'focus' - Linie, wenn Sie möchten, dass der popover-Einblendungen, die auf click-events...


    Hoffe, es hilft!

    InformationsquelleAutor dalcam

  2. 3

    Setzen Attribute in jquery Variablen statt tag

    <img class="icon" rel="popover" src="images/brandable.png"/>

    Fügen Sie das Skript wie folgt

    <script>
$('document').ready(function() {
    var popOverSettings = {
        placement: 'top',
        selector: '.icon',
        title:'Brandable',
        trigger: "hover",
        content:'This is a popover'
    };
$(this).popover(popOverSettings);
});
</script>

    InformationsquelleAutor Shashikala

  3. 0

    Für Ihren code, den Sie haben:

    <img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>

    trigger: "hover" ist kein Gültiger html-Code. Bootstrap-Hilfe-Dokument-Notizen "Optionen übergeben werden können, die über data-Attribute oder JavaScript. Für data-Attribute, hängen Sie die option name, um Daten, wie in data-animation=""."

    Also stattdessen würden Sie wollen Daten-trigger="hover" auch aussieht, Ihr fehlt ein Leerzeichen vor src=.

    Auch Sie haben die Platzierung in der top-html-und auch javascript. Sie brauchen nur zu erklären, an einem Ort. So können Sie Daten löschen-placement="top" aus dem img-tag oder javascript, können Sie Sie entfernen, so würde es nur $('.icon').popover({placement:'top'});

    Auch Sie haben "$" vor Ihre Funktion. Je nachdem, wo sich dieser code befindet, müssen Sie möglicherweise ein jquery-Konflikt. Zu beachten, für sicher, Sie müssen posten, welche Fehlermeldung Sie sehen in Ihrer Fehler-log. Wenn Sie mit chrome Rechtsklick > web-inspect > klicken Sie auf das rote x unten und kopieren Sie alle Fehler, die Sie sehen.

    InformationsquelleAutor cchiera

  4. -1

    Vielleicht der einfachste Weg, dies zu tun verwendet die OnMouseOver und OnMouseOut beschriebenen Ereignisse in dieser Antwort: https://stackoverflow.com/a/10709196/121737

    Ich würde es vorziehen, dies zu tun mit einem Bild, die gleiche Breite wie ein normales Symbol, aber die doppelte Höhe. Dieses Bild zeigt zwei Symbole, eine über der anderen, der oberen, eine, die das normale Symbol, das niedriger als rollte Symbol:

    img.icon {
    display: block;
    width: 4ex; height: 4ex;
    background-size: 4ex 8ex;
    background-position: 0 0;
}

img.icon:hover {
    background-position: 0 -4ex;
}

img.icon#twitter {
    background-image:url('icons/twitter.jpg');
}

img.icon#facebook {
    background-image:url('icons/facebook.jpg');
}

    Nach dieser Erklärung der Symbole in HTML ist viel sauberer:

    <img class="icon" id="twitter" />
<img class="icon" id="facebook" />
<img class="icon" style="background-image:url('icons/other_icon.jpg')" />
    ähmm das ist nicht das, was der OP ist zu Fragen, ... überhaupt ...
    ok, auch keinen Schaden an, hoffentlich 🙂

    InformationsquelleAutor deau

Schreibe einen Kommentar