bootstrap工具提示适用于一个按钮但不适用于其他按钮

Question

我有一个bootstrap工具提示，我定义如下：

<button id="tooltip1" type="button" class="btn btn-default pull-right" 
                        data-toggle="tooltip" 
                        data-placement="right" 
                        data-original-title="Add a Program"
                        ng-click="display.addprogram = true">
                        <span class="glyphicon glyphicon-plus-sign pull-right"></span>
                    </button>

<button id="tooltip1" type="button" class="btn btn-default pull-right"
                                    data-toggle="tooltip" 
                                    data-placement="right" 
                                    data-original-title="Add a Course"
                                    ng-show="{{node.min_credit}} != summedcompleted[{{node.id}}]"
                                    ng-click="open({{node.id}}, {{node.min_credit}}, summedcompleted[{{node.id}}], summedplanned[{{node.id}}])"><span class="glyphicon glyphicon-plus-sign pull-right"></span>
                            </button>

<script id="tooltipid" type="text/javascript">
            $(document).ready(function() {
                $('#tooltip1').tooltip();
            });
        </script>

工具提示仅适用于第一个按钮，但不适用于第二个按钮。可能会发生什么？

Answer 1

HTML ID必须是唯一的。您有两个ID tooltip1的元素，这是不合法的。您应该使用类，例如：

$('.btn').tooltip();