JSFiddle - React, Tailwind, and code Playground

by Christophe Toesca

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<button id="exampleButton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover max width 500px</button>

CSS

#exampleButton{
    margin-top: 100px
}

JavaScript

var p = $("#exampleButton").popover();
p.on("show.bs.popover", function(e){
    p.data("bs.popover").tip().css({"max-width": "500px"});
});