Bootstrap: Add argument data-target to popover

[kaystrobach]

<button data-target="#someSuperDuperStyledDiv" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" >
  Popover on left
</button>
<div id="someSuperDuperStyledDiv">I'm the html popover content</div>

Having this we can use popovers to display html content easier and it is better to read than the data-content attribute, which is currently available.

[drewlustro]

I also wanted this and accomplished it fairly straightforward as a content function you can pass to $.popover()

$('[rel=popover]').popover({
    html: true,
    content: function () {
        var targetId = $(this).attr('data-target');
        return $(targetId).html();
    }
});

[kaystrobach]

thank you @drewlustro .
sure, but having sth. nativly integrated allows easier updating / upgrading ...

[drewlustro]

Not arguing against your request, just giving you a way to do it in the
meantime if you need it for your project.

On Tuesday, April 29, 2014, Kay Strobach [email protected] wrote:

thank you @drewlustro https://github.com/drewlustro .
sure, but having sth. nativly integrated allows easier updating /
upgrading ...

—
Reply to this email directly or view it on GitHubhttps://github.com/twbs/bootstrap/issues/13029#issuecomment-41640298
.

[kaystrobach]

:+1: i understood. never wanted to offend you.

[drewlustro]

:+1: @kaystrobach did that help you out? I just implemented a bunch of code that heavily employs data-target.

It's maybe worth noting that complex content with additional javascript handlers inside popover content must be attached to the DOM after bootstrap fires its shown.bs.popover event. So if you have content in there that does anything custom or special besides <a> links etc, just note that your copied return $(targetId).html() from the popover content function will be eventless.

[kaystrobach]

in my case it is a valid solution, even if i used it before ...
But having event's would not be bad at all :smile:

[mdo]

Punting to the v4 checklist.

[eguneys]

I thought data-target is supposed to tell which element the popover points at. Like in collapse.

[cvrebert]

@eguneys Yeah, we'd likely name it something else. The core idea is reasonable though.

[emersion]

If you want to keep event binding, you can use this:

$('[rel=popover]').each(function () {
    var targetId = $(this).attr('href');
    var target = $(targetId).detach();

    $(this).popover({
        html: true,
        content: function () {
            return target;
        }
    });
});