Question

我在DOM中有一个可拖动的元素，当它被点击时，我想抓住x / y坐标（此示例中未显示，但未来）以及淡入的工具提示的高度。工具提示的源文本是一个AJAX调用，可以是可变长度。我目前的问题是shown.bs.tooltip事件仅在second点击触发元素时触发。代码：

        $('#click').draggable();
        $(document.body).on('click', function () {

            tooltipManager.title();
        });
        $('#click').on('shown.bs.tooltip', function () {
            console.log('from getHeight: ' + getHeight($('.tooltip')));
        });
        var tooltipManager = {
            title: function () {
                //ajax code to get title from database
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "Service.asmx/GetDrugs",
                    dataType: "json",
                    success: function (data) {
                        //bootstrap uses the title attribute to set the html inside the tooltip
                        //here it's set to the results of the AJAX
                        var $tooltipData = prettyTooltip(data.d);
                        var offset = $('#click').offset();
                        var windowSize = [
                            width = $(window).width(),
                            height = $(window).height()
                        ]
                        //this fires on the first click
                        console.log(window.width);
                        console.log(offset.top);
                        $('#click').tooltip({
                            trigger: 'click',
                            html: true,
                            placement: tooltipManager.placement.setPlacement(data.d),
                            title: $tooltipData.html()
                            //it seems to me that it would be better design to call the tooltipManager
                            //setPlacement function, but since it's an async request, it fails
                        });
                        //if I add click() at the above line I get an infinite loop of AJAX calls

                    },
                    error: function (xhr) {
                        console.log('failed: ' + xhr.status);
                    }
                });
            },
            placement: {
                left: 'left',
                top: 'top',
                right: 'right',
                bottom: 'bottom',
                //if the value of getHeight is over a certain amount
                //I want to change the position of the tooltip
                setPlacement: function () {
                    var height = getHeight($('.tooltip'));
                    var place = '';
                    if (height < 150) {
                        place = 'right';
                    }
                    else {
                        place = 'left'
                    }
                    return place;
                }
            }
        }
        //not sure if this is good design to have this not a property of the tooltipManager object
        //this works currently for placing the tooltip in the correct position
        function prettyTooltip(data) {
            var $div = $('<div>');
            for (var i = 0; i < data.length; i++) {
                var $p = $('<p>').text(data[i]).appendTo($div);
            }
            return $div;
        }
        function getHeight(el) {
            return $(el).height();
        }

如果我使用one方法而不是on并且我在代码指示的地方添加了一个click（），工具提示会在第一次点击时触发，但我无法获得偏移量一次性点击后。如何确保保留所有当前功能，而不需要两次单击才能显示工具提示？

已编辑：fiddle

Answer 1

您需要点击document.body一次以启动工具提示。所以在你的文档的底部。只需添加一个点击事件。在第一次点击开始工具提示之前，然后第二次点击实际#click显示它。

见这里：http://jsfiddle.net/RxtBq/2/

我刚刚添加了

$(document.body).click();

在$(document).ready(function () {

结束之前

修改

可替换地。你可以摆脱：

$(document.body).on('click', function () { tooltipManager.title(); });

只需在document.ready函数的末尾调用tooltipManager.title();。

http://jsfiddle.net/RxtBq/3/

最重要的部分是在您尝试点击tooltipManager.title(); div
之前调用#click

Answer 2

我认为问题是所有工具提示事件都以某种方式发生冲突。如果您需要每次都获取新的工具提示内容，一种方法是销毁和重新初始化。

请注意，以下代码还会侦听其他单击以隐藏工具提示。（如果这不是你想要的，请告诉我。）

if ($('.tooltip:visible').length) { // destroy
  $('#click')
    .tooltip('destroy');
} else { // reinitialize
  $('#click')
    .tooltip('destroy')
    .tooltip({
      trigger: 'click',
      html: true,
      title: $tooltipData.html()})
    .tooltip('show');
}

更新了小提琴：http://jsfiddle.net/RxtBq/4/。

Answer 3

您可以在创建工具提示后放置.tooltip('show')

$('#click').tooltip({
                    trigger: 'click',
                    html: true,
                    title: $tooltipData.html()

                }).tooltip('show');

这里是小提琴http://jsfiddle.net/g5mbn/

仅在第二次单击后加载动态div

3 个答案: