wordpress post excerpt in bootstrap popover

Question

I'm trying to dynamically fill out a bootstrap popover using wordpress post exerpts. I feel that I am pretty close to getting this working similar to this fiddle: http://jsfiddle.net/dalecameron/QZj5P/11/

The code I have so far is as follows:

function powerloop_excerpt( $atts ) {
   global $post;

   $defaults = array(
     'class' => '',
    'title' => 'Popover Title',
    'content' => 'Content'
   );
   $atts = shortcode_atts( $defaults, $atts );
    ob_start();

            ?>
            <script>
                    jQuery(function(){
                         jQuery("a[rel=popover]")
                        .popover({
                            html:true,
                            trigger: 'hover',
                            content: function () {
                            return $out;
                            },
                            title: ''
                        })
                        .click(function(e) {
                            e.preventDefault()
                        });
                    });
            </script><?php
   $excerpt = get_the_excerpt();

   //post format
    $media = pagelines_media( array( 'thumb-size' => 'full' ) );
    $powerloop_quote = has_post_format( 'quote' );
    $powerloop_link = has_post_format( 'link' );

    if(!$powerloop_quote && !$powerloop_link):
      $out = sprintf('<p class="%s power-excerpt">%s</p>',
      $atts['class'],
      $excerpt
      );
    else:
      $out = '';
    endif;
    $expop = sprintf('<a href="#" rel="popover" data-placement="right"><i class="fa fa-info-circle"></i></a>');
    return $expop;
}

Answer 1

You're mixing PHP and JS variables here. This:

content: function () {
  return $out;
},

Can't work as $out is a PHP variable, and it is defined after you're trying to print it.

An other issue you have is that you use ob_start() to capture the output (which is a good idea) but never return it content. You return instead the popup link, so the JS part is being skipped.

I suggest to change your function to this:

function powerloop_excerpt( $atts ) {
    global $post;

    $defaults = array(
        'class' => '',
        'title' => 'Popover Title',
        'content' => 'Content'
    );
    $atts = shortcode_atts( $defaults, $atts );

    //post format
    $media = pagelines_media( array( 'thumb-size' => 'full' ) );
    $powerloop_quote = has_post_format( 'quote' );
    $powerloop_link = has_post_format( 'link' );
    $excerpt = get_the_excerpt();
    $title = get_the_title();
    if(!$powerloop_quote && !$powerloop_link) {
        $content = sprintf('<p class="%s power-excerpt">%s</p>',
            $atts['class'],
            $excerpt
        );
    } else {
        $content = '';
    }

    ob_start();
    ?>
    <script type="text/javascript">
        jQuery(function(){
            jQuery("a[rel=popover]")
                .popover({
                    html:true,
                    trigger: 'hover',
                    title: '<?php echo $title; ?>',
                    content: '<?php echo $content; ?>'
                })
                .click(function(e) {
                    e.preventDefault()
                });
        });
    </script>
    <?php
    $out = ob_get_clean();

    $out  .= '<a href="#" rel="popover" data-placement="right"><i class="fa fa-info-circle"></i></a>';
    return $out;
}