2014-10-20 52 views
0

我到處尋找解決方案,但是我想出的一切都不起作用。我試圖完成的事情很簡單:我只想要一個彈出窗口來描述當你將鼠標懸停在它上面時按鈕的功能。按鈕的代碼如下:在按鈕懸停上觸發彈出窗口

<button class="btn btn-danger deleteLine" type="button" id="deleteLine_<@[email protected]>"><i class="icon-remove"></i></button> 

我已經嘗試了正則表達式查找匹配的ID前面:

$('[id^="deleteLine_"]').popover({ 
    trigger: "hover focus", 
    content: "Delete this line." 
}); 

$('button[id^="deleteLine_"]').popover({ 
    trigger: "hover focus", 
    content: "Delete this line." 
}); 

我試過在ID的正則表達式尋找在ID之間是否匹配:

$('[id*="deleteLine_"]').popover({ 
    trigger: "hover focus", 
    content: "Delete this line." 
}); 

$('button[id*="deleteLine_"]').popover({ 
    trigger: "hover focus", 
    content: "Delete this line." 
}); 

我累了,鎖上類 「deleteLine」

$('.deleteLine').popover({ 
    trigger: "hover focus", 
    content: "Delete this line." 
}); 

三次闖出來。我想避免在內聯代碼中使用「onmouseover」和「onfocus」屬性。由於行的動態特性,我無法執行靜態分配(可在模式的其他部分工作)。

我在IE10和FF21中使用Bootstrap 2.3.2和jQuery 2.1.1。不幸的是,升級到新版本不是一種選擇。

+1

你爲什麼不使用的提示呢?無論如何,這就是工具提示。 – Aibrean 2014-10-20 18:08:00

+0

有人在客戶端剔除了工具提示,因爲它們與我們在其他地方的信息圖標中看到的彈出不匹配。 – Blze001 2014-10-20 18:27:28

+0

你可以嘗試在這個解決方案的技術在多個觸發條件:http://stackoverflow.com/questions/17437818/twitter-bootstrap-popover-trigger-how-to-set-multiple-triggers – adamdc78 2014-10-20 18:42:21

回答

0

HTML

<p title="this is title">What is this</div> 

JS

$(function() { 
     $('[title]').attr("data-rel", "tooltip"); 
     $("[data-rel='tooltip']") 
      .attr("data-placement", "top") 
      .attr("data-content", function() { 
       return $(this).attr("title") 
      }) 
      .removeAttr('title'); 


     var showPopover = function() { 
      $(this).popover('show'); 
     }; 
     var hidePopover = function() { 
      $(this).popover('hide'); 
     }; 
     $("[data-rel='tooltip']").popover({ 
      trigger: 'manual' 
     }).click(showPopover).hover(showPopover, hidePopover); 

    }); 
+0

這工作。謝謝你,先生。 – Blze001 2014-10-21 18:04:47

+0

不是問題,先生:) – 2014-10-31 07:30:37

相關問題