Question

我到处寻找解决方案，但我想出的一切都没有用。我想要完成的事情很简单：我只想要一个弹出框来描述当你将鼠标悬停在按钮上时按钮的作用。按钮的代码如下：

<button class="btn btn-danger deleteLine" type="button" id="deleteLine_<@=lineCount@>"><i class="icon-remove"></i></button>

我已尝试在正面寻找匹配的正则表达式：

$('[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。不幸的是，升级到新版本不是一种选择。

Answer 1

<强> 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);

  });

按钮悬停时触发弹出窗口

1 个答案: