圖像上的引導彈出框

Question

所以我有一個圖標列表，當你在一個圖標上 hover 時，我試圖激活一個彈出窗口，我似乎無法讓它工作，任何幫助將不勝感激。

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

我在一個單獨的 js 文件中有這個

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

Answer 1

這已經遲了一年了，但是我發現它可以工作： Fiddler Link
使用此JS：

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

而這個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"/>

您需要使用tabindex屬性允許圖像接受焦點。 那是我的關鍵。 如果您希望彈出窗口在點擊事件中保持打開狀態，請刪除“觸發：'焦點'行。
希望能幫助到你！

Answer 2

將屬性放在jquery變量而不是標簽中

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

如下添加腳本

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

Answer 3

對於您的代碼，您有：

<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"無效的html。 Bootstrap幫助文檔指出：“可以通過數據屬性或JavaScript傳遞選項。對於數據屬性，請將選項名稱附加到data-，如data-animation="" 。

因此，相反，您可能希望包含data-trigger =“ hover”，也似乎在src=之前缺少空格。

另外，您在html和javascript中都有頂部位置。 您只需要在一個地方聲明即可。 因此，您可以從img標簽中刪除data-placement =“ top”，或者在您的JavaScript中將其刪除，使其僅為$('.icon').popover({placement:'top'});

另外，您的函數前面還有“ $ ”。 根據該代碼的位置，您可能會遇到jquery沖突。 為了確保一定要注意，您需要張貼在錯誤日志中看到的任何錯誤。 如果您使用的是chrome，請右鍵單擊>網絡檢查>單擊底部的紅色x，然后復制在此看到的所有錯誤。

Answer 4

$(function(){ $('#poper').popover({ html: true, trigger:'focus', content: $('#pop') }); } );

Answer 5

也許最簡單的方法是使用此答案中描述的OnMouseOver和OnMouseOut事件： https : //stackoverflow.com/a/10709196/121737

我寧願使用一張圖像來完成此操作，該圖像的寬度與普通圖標相同，但高度為兩倍。 該圖像將顯示兩個圖標，一個在另一個圖標上方，上面的是普通圖標，下面的是滾動圖標：

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');
}

在此之后，聲明HTML中的圖標更加簡潔：

<img class="icon" id="twitter" />
<img class="icon" id="facebook" />
<img class="icon" style="background-image:url('icons/other_icon.jpg')" />