Question

我是一位相当新的铁轨程序员（大约一年左右），正在开展我的第一个大项目。它是用haml btw编写的。

所以这是我的_loginaside.haml的代码：

%a.btn.btn-info{"data-content" => "A larger popover to demonstrate the max-width of the Bootstrap popover.", "data-toggle" => "popover", href: "#", title: "Popover title"} Large popover

我的shared.js.coffee：

$(document).ready ->
  $(".btn").popover placement: "bottom"
  return

这是输出的html（忽略凌乱的li）：

   <li class='login-user clearfix'></li>
    <a class='btn btn-default' data-content='Hello' data-toggle='popover' href='#' title='Popover title'>Large popover</a>
    <span class='user-icon'>
      <img alt="Login" src="/assets/login.png" />
      luke@hollowaydesignfirm.com
    </span>

最后我的标题：

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/bootstrap/affix.js?body=1"></script>
<script src="/assets/bootstrap/alert.js?body=1"></script>
<script src="/assets/bootstrap/button.js?body=1"></script>
<script src="/assets/bootstrap/carousel.js?body=1"></script>
<script src="/assets/bootstrap/collapse.js?body=1"></script>
<script src="/assets/bootstrap/dropdown.js?body=1"></script>
<script src="/assets/bootstrap/tab.js?body=1"></script>
<script src="/assets/bootstrap/transition.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script src="/assets/bootstrap/modal.js?body=1"></script>
<script src="/assets/bootstrap/tooltip.js?body=1"></script>
<script src="/assets/bootstrap/popover.js?body=1"></script>
<script src="/assets/bootstrap.js?body=1"></script>
<script src="/assets/shared.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>

按钮显示但弹出窗口无法正常工作。

Answer 1

这实际上是我的coffescript中的一个错误之前几行没有让这一个加载。感谢你们的帮助！

Answer 2

尝试将popover封装在div中并调用div的a元素，例如

<script type="text/javascript">
    jQuery( function($) {
       $("#hint a").popover({
          trigger: "click hover"
          placement: "bottom"
       }) 
    });
</script>
<div id="hint">
    <%= link_to "Press me", "javascript:;", :"data-content" => "hello this is the content of the popover", :"data-togle" => "popover", :class => "btn btn-info" %>
</div>

我对haml和咖啡不太好，但我的客人是一个简单的翻译，注意路径是 javascript :; ，这可以防止重定向到新页面，希望它帮助

Answer 3

请在悬停

上查看这个JFiddle示例的bootstrap popover

http://jsfiddle.net/GWfdJ/

你必须翻译成HAML和Coffee，但这是非常直接的代码翻译（见下文）。

注意我在设置popover函数时，通过其ID而不是类来调用元素。

我还使用Bootstrap CDN作为JS和CSS。要测试您的代码，请先使用CDN，以便了解正确加载的资源。如果加载了CDN后JavaScript被破坏，那么您就知道它是您的代码，如果它与CDN一起使用但不与您单独链接的资产一起使用，那么您就知道您错过了一个自举文件或者没有。正确连接资产。

http://www.bootstrapcdn.com/

.html.erb

<a href="#" id="example" class="btn btn-primary" rel="popover"
   data-content="This is the body of Popover"
   data-original-title="Title of Popover" 
   data-placement="right"
>pop
</a>

的.js

$(function () {
    $('#example').popover({trigger: "hover"});
});

Bootstrap Popover不使用Rails

3 个答案: