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

Question

bootstrap tooltip允許我通過僅指定“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");