Question

我在我的Rails应用程序中使用工具提示，但它不能用于输入字段，因为我的代码是：

  %input#main-search{:name => "query", :placeholder => "search all 
    items", :rel => "tooltip", :title => "Search All Items", :type => "text"}
  :javascript
    $(document).ready(function(){
      $('input[title]').tooltip({placement:'bottom'});
    });

我也用：

$('#main-search').tooltip({'trigger':'focus'});

它不适用于输入字段，但对于标签，它可以正常工作。我怎样才能输入输入字段的工具提示？

Answer 1

以下是工具提示的有效HTML标记：

<input data-toggle="tooltip" title="tooltip on second input!" type="text" placeholder="Focus me!" name="secondname"/>

这里是jQuery，正确放置工具提示和触发焦点：

$('input[type=text][name=secondname]').tooltip({ /*or use any other selector, class, ID*/
    placement: "right",
    trigger: "focus"
});

Always look at official docs

这是工作演示：http://jsfiddle.net/N9vN8/69/

Answer 2

只需键入以下脚本，将其激活到您想要使用工具提示的所有输入或字形更简单：

<script type="text/javascript">
$(function () {
                $('[data-toggle="tooltip"]').tooltip()
            });
</script>

在输入中：

<input data-toggle="tooltip" data-placement="left" title="Your awesome tip!" type='text' class="form-control" name="name"  placeholder="placeholder" maxlength="10"/>

在glyphicon中：

<span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="right" title="Open calendar"></span>

这样，在同一表单的多个输入中使用工具提示时，您不必担心任何ID。

来源：docs。

Bootstrap Tooltip无法在输入字段上工作

2 个答案: