4

引导工具提示允许我通过仅指定“标题”属性来指定元素的工具提示：

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

有什么方法可以避免对工具提示内容进行硬编码，而是指定一个 javascript 函数？我试过 title="javascript:myFunction()" 但它没有解决它。

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

来自引导工具提示的片段：

, 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
  }
4

3 回答 3

6

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
})
于 2013-06-19T20:14:54.447 回答
1

如果您使用的是引导程序 3，则可以在 div 中放置一个 id

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

然后使用此代码

$("#title-text").attr('data-original-title', "the title");
于 2015-01-20T19:48:47.020 回答
1

我不知道如何使用函数，但我使用配置文件来保存工具提示的标题/正文。然后，我为标题和正文使用数据属性并将其保留在我的 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;
    }
  };

现在，我的工具提示有了动态的正文和标题。

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

于 2013-06-19T20:10:39.350 回答