Name change popover with bootstrap and jquery

Question

here is the html for the link, i.e.:

<a href="javascript:void(0);" style="font-size: 3em; color: #222" class="popover-test" id="directNavPrev" data-title="Previous Result Row" data-content="Previous Result Row"> &laquo;</a> 

yes, I call .popover () to initialize, and popover works just fine. I can get the content to update without problems. just not a name. I tried "prev.data ('title', 'new title')" and even tried to restart "prev.popover ({title: 'new title'}); without dice ... thanks.

  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 result<table><tr><td>blah</td><td>blah</td></tr><tr><td>blah</td><td>blah</td></tr><tr><td>blah</td><td>blah</td></tr><tr><td>blah</td><td>blah</td></tr></table>"); next.attr('data-content', "Check it! this will contain the information for the next result<table><tr><td>blah</td><td>blah</td></tr></table>"); 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 <b>instrument</b><table><tr><td>blah</td><td>blah</td></tr></table>"); next.attr('data-content', "Check it! this will contain the information for the next <b>instrument</b><table><tr><td>blah</td><td>blah</td></tr></table>"); 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 <b>book/page</b><table><tr><td>blah</td><td>blah</td></tr></table>"); next.attr('data-content', "Check it! this will contain the information for the next <b>book/page</b><table><tr><td>blah</td><td>blah</td></tr></table>"); break; } direct.css('color', '#aaa').not('#directNavigationHeader'); } 

Answer 1

Consider the cat tailored!

Here's the deal. It looks like there is no getTitle () method in the bootstrap.js file, even if it calls. So I added. Enjoy it.

 /* 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 } }) 

for some reason I cannot capture the actual attribute "title", so you will need to use "data-title" if you want to change it.

Answer 2

The easiest way to do this:

  var newTitle = "Here my new title"; $('#MyExample').attr('data-original-title', newTitle); 

Hope this helps!

Answer 3

Twitter-bootstrap doesn't seem to support a div for targeting popover, so changing the title by changing the title is not possible. However, this article may help.

Here's the jsfiddle you can play with.

And the code for those who can’t play with it. :-)

HTML:

 <div style="padding-top: 45px;"> <a data-content="Original Content for Popover" data-original-title="Popover Title" data-placement="right" href="#" class="btn danger" id="popover-link" rel="popover">Rollover</a> </div>​ 

JavaScript:

 $('#popover-link').popover({title: function() {return 'new title';}}); $('#popover-link').attr("data-content", "New Content for Popover"); $('#popover-link').setTitle('new title');​ 

Answer 4

it worked for me

 $("#mylink").data()["bs.popover"].config.title = "New Ttile"; $("#mylink").data()["bs.popover"].config.content = "<p>New Content</p>"; 

or

 $("#mylink").data("bs.popover").config.title = "New Ttile"; $("#mylink").data("bs.popover").config.content = "<p>New Content</p>";