Question

bootstrap工具提示允许我仅通过指定“title”属性为元素指定工具提示：

<div title="This is a test tooltip"> ... </div>

有没有办法避免硬编码工具提示内容并指定一个javascript函数？我试过title =“javascript：myFunction（）”，但它没有解决它。

我查看了booststrap代码，它似乎包含对函数调用的支持我只是无法弄清楚语法：

来自bootstrap工具提示的片段：

, getTitle: function () { 
      var title
      , $e = this.$element
      , o = this.options

      title = $e.attr('data-original-title')
       || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)

     return title
  }

Answer 1

http://twitter.github.io/bootstrap/javascript.html#tooltips

给你的div一个id并打电话

function titleSetter(node) {
   return "My Tooltip text";
}
$('#my-div-id').tooltip({
    title: 'My Tooltip text'
});

// or

$('#my-div-id').tooltip({
    title: titleSetter
})

Answer 2

我不知道如何使用函数，但我使用配置文件来保存工具提示的标题/正文。然后我使用数据属性作为标题和正文，并将其保留在我的html中。这是我的配置文件（实际上只是一些json）：

var help = {
    '001': {
      title: 'Title 1',
      description: 'Body 1'
    },
    '002': {
      title: 'Title 2',
      description: 'Body 2'
    }
  }

我的html看起来就像是听起来：

  <div data-help="001"></div>

然后我在标题和内容中返回一个函数，如下所示：

var tooltipOptions = {
    trigger: 'manual',
    title: function() {
      return help[$(this).attr('data-help')].title;
    },
    content: function() {
      return help[$(this).attr('data-help')].description;
    }
  };

现在我的工具提示有一个动态的主体和标题。

我相信这会解决您在问题中遇到的问题。祝你好运！

Answer 3

如果您使用的是bootstrap 3，则可以在div中添加id

<div id="title-text" title="This is a test tooltip"> ... </div>

然后使用此代码

$("#title-text").attr('data-original-title', "the title");

bootstrap工具提示：如何使用javascript函数指定工具提示文本

3 个答案: