使用bootstrap和jquery更改popover的标题
这是链接的html，即：
« 是的，我正在调用.popover（）进行初始化，弹出窗口工作正常。 我可以让内容更新没有问题。 只是不是标题。 我试过“prev.data（’title’，’new title’）”，甚至尝试重新初始化“prev.popover（{title：’new title’}）;” 没有骰子……谢谢。
function SetDirectNavigationPlaceholder() { //debugger; var item = $("#movementType :selected").val(); var direct = $('#directNavigation'); var prev = $('#directNavPrev'); var next = $('#directNavNext'); switch (item) { case "result": $('#bookTypeSection').addClass('hide'); direct.val('Result Row from 1 - 150'); prev.attr('data-title', "Previous Result Row"); next.attr('data-title', "Next Result Row"); prev.attr('data-content', "Check it! this will contain the information for the previous resultblah blah blah blah blah blah blah blah
"); next.attr('data-content', "Check it! this will contain the information for the next resultblah blah
"); break; case "instrument": $('#bookTypeSection').addClass('hide'); direct.val('Instrument #'); prev.attr('data-title', "Previous Instrument #"); next.attr('data-title', "Next Instrument #"); prev.attr('data-content', "Check it! this will contain the information for the previous instrumentblah blah
"); next.attr('data-content', "Check it! this will contain the information for the next instrumentblah blah
"); break; case "bookpage": $('#bookTypeSection').removeClass('hide'); direct.val('Book/Page'); prev.attr('data-title', "Previous Book/Page"); next.attr('data-title', "Next Book/Page"); prev.attr('data-content', "Check it! this will contain the information for the previous book/pageblah blah
"); next.attr('data-content', "Check it! this will contain the information for the next book/pageblah blah
"); break; } direct.css('color', '#aaa').not('#directNavigationHeader'); }
最简单的方法就是这样：
var newTitle = "Here's my new title"; $('#MyExample').attr('data-original-title', newTitle);
希望它有所帮助！
考虑一下猫的皮肤！
这是交易。 似乎在bootstrap.js文件中没有getTitle（）的方法，即使它正在调用。 所以我添加了它。 请享用。
/* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js ========================================== */ Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, { constructor: Popover, setContent: function () { //debugger; var $tip = this.tip() , title = this.getTitle() // didn't exist , content = this.getContent() $tip.find('.popover-title')[this.isHTML(title) ? 'html' : 'text'](title) $tip.find('.popover-content > *')[this.isHTML(content) ? 'html' : 'text'](content) $tip.removeClass('fade top bottom left right in') } , hasContent: function () { return this.getTitle() || this.getContent() } , getContent: function () { var content , $e = this.$element , o = this.options content = $e.attr('data-content') || (typeof o.content == 'function' ? o.content.call($e[0]) : o.content) return content } , getTitle: function () { // does now var title , $t = this.$element , n = this.options title = $t.attr('data-title') || (typeof n.title == 'function' ? n.title.call($t[0]) : n.title) return title } , tip: function () { if (!this.$tip) { this.$tip = $(this.options.template) } return this.$tip } })
出于某种原因，我无法获取实际的“标题”属性，因此如果您想要更改它，则必须使用“数据标题”。
看起来像Twitter-bootstrap没有保留一个div来定位弹出窗口，因此无法通过更改标题来更改标题。 但是， 这篇文章可能有所帮助。
这是一个jsfiddle ，你可以，呃，摆弄。
那些不能摆弄它的人的代码。 🙂
HTML：
JavaScript的：
$('#popover-link').popover({title: function() {return 'new title';}}); $('#popover-link').attr("data-content", "New Content for Popover"); $('#popover-link').setTitle('new title');