具有内容功能的Bootstrap 3 Popover

Question

Bootstrap 3 provides a Popover that I'm trying to use. The docs say that the data-content may be either a string or a function. However, I seem unable to set the content to a function:

<button type="button" 
        class="btn btn-lg btn-danger" 
        data-toggle="popover" 
        title="Popover title" 
        data-content="my_function();">
  Click to toggle popover
</button>

And here's the JavaScript:

$(function () {
  $('[data-toggle="popover"]').popover()
})

function my_function(){
    return "This is my popover's content";
}

You can try the JSFiddle .

I've also tried variations like data-content="javascript:my_function();" . I'm not sure if my syntax is just a little off, or if you can't use data-content this way.

Is it possible to specify a function for a Popover's content using the data-content attribute? Or am I misunderstanding the docs?

Answer 1

Pass the data- , (ie, data-content) attribute through $(elem).popover(options)

  $('[data-toggle="popover"]').popover({
    content: my_function(this)
  })

Here's your revised fiddle for you to review. https://jsfiddle.net/heb6gt6p/1/

Answer 2

无法使用data-content属性为Popover的内容指定功能。