1

我在 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() ，则工具提示会在第一次单击时触发，但在一次性单击后我无法获得偏移量。如何确保保留所有当前功能并且不需要单击两次即可显示工具提示？

编辑：小提琴

4

3 回答 3

2

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

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

我刚刚添加

$(document.body).click();

就在结束之前$(document).ready(function () {

编辑：

或者。你可以摆脱：

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

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

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

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

于 2013-10-18T18:50:25.960 回答
0

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

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

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/。

于 2013-10-18T18:58:39.060 回答
0

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

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

                }).tooltip('show');

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

于 2013-10-18T19:01:05.833 回答