有没有一种方法可以在Bootstraptour

时间:2019-01-12 23:07:28

标签: javascript twitter-bootstrap bootstrap-tour

我有一个为bootstraptour创建的自定义脚本,我想用自己的自定义展示位置覆盖bootstraptours的原始“顶部”展示位置。有没有一种方法可以在Bootstraptour中定义工具提示的多个位置?

bootstrap-tour-standalone.js中的默认代码为:

          Tooltip.DEFAULTS = {
            animation: true,
            placement: 'top', //Default
            selector: false,
            template: '<div class="tooltip" role="tooltip"></div>',
            container: false
          }

我的自定义脚本代码是:

        'use strict';

        $(function () {
            var steps = [];
            var leadIndex = 0;
            function gensteps(index, div, message, template) {

                var id = $(div).attr('id');
                if (id === undefined) {
                    $(body).attr('id', 'id_' + leadIndex + '_' + index);
                    id = $(div).attr('id');
                }
                var step = {
                    element: '#' + id,
                    placement: 'top',
                    content: message,
                    backdropElement: '#client-activated-update-client-info'
                };
                steps.push(step);
            }

            leadIndex++;
            placement: 'left'; //I would like for this tooltip to overwrite default top placement and move to the left
            $('#Address1').each(function (index, div) {
                var template = '<div class="popover" role="tooltip"> <div class="arrow"></div> <div class="popover-content"></div> <div class="popover-navigation"> <div class="btn-group-custom"> <button class="tip-skip-button">Next</button> </div> <button class="tip-exit" data-role="end">Exit</button> </div> </div>';
                gensteps(index, div, '<h3 class="tool-tip-title">Review/Update Your Address</h3>\n    <div class="tip-content">\n    </div>', template);
            });


            leadIndex++;
            placement: 'right'; //I would like for this tooltip to overwrite default top placement and move to the right
            $('#Address2').each(function (index, div) {
                var template = '<div class="popover" role="tooltip"> <div class="arrow"></div> <div class="popover-content"></div> <div class="popover-navigation"> <div class="btn-group-custom"> <button class="tip-skip-button">Next</button> </div> <button class="tip-exit" data-role="end">Exit</button> </div> </div>';
                gensteps(index, div, '<h3 class="tool-tip-title">Review/Update Your Address</h3>\n    <div class="tip-content">\n    </div>', template);
            });

            var tour = new Tour({
                steps: steps
            });tour.init();tour.start(true);
            tour.goTo(0);

        });

如您所见,在我的第一个目标(#Address1)中,我试图将工具提示定位在左侧,在我的下一个目标(#Address2)中,我想将工具提示定位在右侧,但它不起作用。

0 个答案:

没有答案