Comment puis-je faire Bootstrap liste de travail avec du contenu HTML dans un autre élément

Je suis dans le processus de combinaison de Bootstrap panneaux avec Bootstrap liste des fonctionnalités. L'objectif est de montrer une liste lorsque l'utilisateur place le panneau d'en-tête. J'ai déjà eu ce travail, sauf que le data-content="" partie devient tout à fait ingérable quand il a beaucoup de HTML à l'intérieur.

Voici un exemple de code HTML, je travaille avec. La partie qui dit que "les CHARGES DE HTML" contient des div à l', table, p, etc.

<div class="panel panel-default">
    <div class="panel-heading">
        <i class="fa fa-briefcase fa-fw"></i> 
        <abbr title="Panel title" data-container="body" data-toggle="popover" 
              data-placement="bottom" data-trigger="hover" data-html="true" 
              data-content="<div>LOADS OF HTML HERE</div>">
          Panel title
        </abbr>
        <div class="col-xs-6 col-md-4 pull-right" style="margin-top: -4px;">
            <!-- some buttons go here -->
        </div>
    </div>
    <!-- /.panel-heading -->
    </div>
    <!-- some panel content goes here -->
</div>

Autres Bootstrap plugins résoudre ce problème en vous permettant de placer le code HTML dans un élément distinct, puis de référence de cet élément avec un "data-target" attribut. Malheureusement, la Liste ne prend pas en charge cette. Comment puis-je imiter ce comportement sans écrire élément spécifique du JavaScript?

  • Pourquoi avez-vous de poser et de répondre à la question?
  • Parce que StackOverflow favorise la Q&A-style de contenu? blog.stackoverflow.com/2011/07/...
  • Info doux. Maintenant, je peux enfin poster les questions que je me mets charge de travail dans la, seulement pour trouver la réponse moi-même, juste avant d'être prêt à poster :). Il y a au moins été une couple de fois où il aurait probablement été utile pour les autres aussi 🙂