0

我正在尝试将引导工具提示添加到 html 按钮但没有成功。我已经尝试了在网上找到的许多示例,但根本无法显示工具提示。

我添加了 bootstrap.js、jquery.js,虽然我听说 bootstrap.js 中包含了工具提示 js,但我下载并尝试了 bootstrap-tooltip.js。

我试图通过引用一个类来启动工具提示,并且 rel=. 唯一可以使工具提示显示的是添加选项显示,这使它一直显示。

下面是我最近的尝试...

 <div class="input-xxlarge">
      <div class="input-append">
          <asp:DropDownList ID="ddStylists" AutoPostBack="true" OnSelectedIndexChanged="ddStylists_SelectedIndexChanged"
               CssClass="input-xxlarge" DataSourceID="lnqStylists" DataTextField="fullName" DataValueField="StylistID" runat="server">
                    <asp:ListItem Value="-1" Selected="True">---Select Stylist---</asp:ListItem>
          </asp:DropDownList>
          <a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a>!
          <button id="btnSchedule" runat="server" data-placement="right" rel="tooltip" data-original-title="Send Info" class="button button-basic button-basic-orange">
                    <i class="icon-calendar"></i>
          </button> 

      </div>
 </div>

<script type='text/javascript'>
    $('.link').tooltip();
</script>

<script src="../Scripts/ease/js/jquery.min.js"></script>
<script src="../Scripts/ease/js/bootstrap.min.js"></script>

我究竟做错了什么?

谢谢

4

2 回答 2

1

尝试使用data-toggle这样的 html 标记,看看它是否有效。

<a class="link" data-toggle="tooltip" data-trigger="hover"
  data-original-title="Some Text!">Hover me!</a>

jsFiddle

于 2013-07-02T13:58:22.467 回答
0

您是否尝试在加载 J Query 和 Bootstrap 后初始化工具提示?

<script src="../Scripts/ease/js/jquery.min.js"></script>
<script type='text/javascript'>
$('.link').tooltip();

熟悉所有浏览器的开发者控制台,你可以检查各种各样的东西,这也让你不会因为这些问题而发疯

于 2015-10-12T16:28:39.870 回答