JSFiddle - React, Tailwind, and code Playground

by 亮 薛

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="well">
     <h1>Twitter Bootstrap 3</h1>

     <h4>Changing the width of Bootstrap popover</h4>
 <a target="_blank" href="http://stackoverflow.com/questions/19448902/changing-the-width-of-bootstrap-popover"><b>Question:</b> http://stackoverflow.com/questions/19448902/changing-the-width-of-bootstrap-popover</a>

    <p class="lead">This is an example of how to change the width of a popover in Twitter Bootstrap 3</p>

    <hr/>

    <!-- Popover 1 -->
    <h4>Popover 1 - Contained within `.well`</h4>
    <p>Notice the popover width of this popover is the same as `div.well` (View the Javascript - container: '.well').</p>
    <button id="example-div" class="btn btn-success" rel="popover" data-original-title="Width equals `.well` width (`container`)">Click for popover (Container = `.well`)</button>
    <hr/>
    
    <!-- Popover 2 -->
    <h4>Popover 2 - Contained within `body`</h4>
    <p>Notice the popover width of this popover is the same as `div.well` (View the Javascript - container: '.well').</p>
    <button id="example-body" class="btn btn-success" rel="popover" data-content="" data-original-title="Width equals `body` width (`container`)">Click for popover (Container = `body`)</button>
    
    <hr/>
    
    <p class="lead">Note: Activate the popover &amp; scroll down to see the popover stick with the contained div.</p>
    
</div>

CSS

body {
    height: 1000px;
    padding:10px;
    text-align:center;
}
.well{
    /* max-width: 500px; */
    margin: 0 auto;
    position: fixed;
    top: 10px;
}
.popover{
    max-width: 100%; // Max Width of the popover (depending on the container!)
}

JavaScript

// Set our default popover options
$.fn.popover.Constructor.DEFAULTS.trigger = 'click';
$.fn.popover.Constructor.DEFAULTS.placement = 'bottom';

// Attach the event on jQuery DOM Ready
$(function () {
    $("#example-div").popover({
        content: lorem,
        placement: 'top',
        container: '.well' // Popover scrolls with div.well
    });

    $("#example-body").popover({
        content: lorem,
        container: 'body' // Popover scrolls with body
    });
});

var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra tellus sit amet massa efficitur placerat. Cras mollis enim neque, luctus porttitor neque suscipit eu. Aliquam rhoncus nisi sit amet dui porttitor tincidunt in at diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque elementum dui eget odio ultricies eleifend at sit amet arcu.";

//console.log($.fn.popover.Constructor.DEFAULTS);

/* ------------------------
 * -- Popover Properties --
 * ------------------------
 * animation: true
 * container: false
 * content: ""
 * delay: 0
 * html: false
 * placement: "bottom"*
 * selector: false
 * template: "<div class="popover">...</div>"
 * title: ""
 * trigger: "hover"
 */