引导工具提示:如何使用javascript函数指定工具提示文本

bootstrap tooltip: how to specify tooltip text using a javascript function

本文关键字：工具提示 函数 javascript 文本 何使用      更新时间：2023-09-26

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
  }

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

给你的div一个id和call

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

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

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

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

如果你使用的是bootstrap 3，你可以在div

中添加一个id
<div id="title-text" title="This is a test tooltip"> ... </div>

，然后使用这个代码

$("#title-text").attr('data-original-title', "the title");
相关文章：