Question

我需要使用bootstrap工具提示显示一些动态内容。为此，我需要获取当前元素的id，即鼠标当前所在的元素。

我如何获得此元素的id。

我使用的代码如下所示。请原谅可怜的编码，我只是一个初学者。

这里的id表示HTML元素的id。

function getData(id){
var req = new XMLHttpRequest()
req.open('POST', '/bj',false)
req.send(id)
return req.responseText
}
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
    title : getData(id)
});
});

Answer 1

根据documentation，

如果给出了一个函数，则会调用它，并将this引用设置为工具提示附加到的元素。

因此，你可以传递一个匿名函数，this.id将是调用函数时工具提示附加到的元素的id。

Example Here

$('[data-toggle="tooltip"]').tooltip({
    title: function () {
        return getData(this.id);
    }
});

作为旁注，您还可以收听show.bs.tooltip / shown.bs.tooltip个事件中的任何一个。

Bootstrap Docs - Tooltip Events

show.bs.tooltip - 调用show实例方法时会立即触发此事件。

shown.bs.tooltip - 当工具提示对用户可见时将触发此事件（将等待CSS转换完成）。

在事件监听器中，您可以调用getData函数并传递this.id。

Example Here

$('[data-toggle="tooltip"]').on('show.bs.tooltip', function () {
  getData(this.id);
});

Answer 2

function getData(id) {

  console.log(id);

  return id;
}

$(document).ready(function (){

    $('[data-toggle="tooltip"]').each(function (){

        $(this).tooltip({

            title: function (){

                return getData($(this).attr('id'));
            }
        });

    });
});

获取触发工具提示的HTML元素的ID

2 个答案: