stackoverflow: Bootstrap Popover on Input : hover

http://stackoverflow.com/questions/18555560/bootstrap-popover-on-input-hover

by tkrotoff

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"></script>
<div id="container">

    <p>Click on the inputs to show/hide the related popover</p>
    
    <div class="row">
        <div class="col-xs-10">
            <label for="placement-bottom">placement-bottom</label>
            <input id="placement-bottom" class="form-control" type="text"
            data-toggle="popover" data-trigger="click"
            data-placement="bottom" data-content="My popover content.">
        </div>
    </div>

    <div class="row">
        <div class="col-xs-4">
            <label for="original-issue">original-issue</label>
            <input id="original-issue" class="form-control" type="text"
                   data-toggle="popover"
                   data-trigger="click"
                   data-content="My popover content.My popover content.My popover content.My popover content.">
        </div>
    </div>

    <div class="row">
        <div class="col-xs-4">
            <label for="position-fixed">position: fixed</label>
            <input id="position-fixed" class="form-control" type="text"
                   data-toggle="popover"
                   data-trigger="click"
                   data-content="My popover content.My popover content.My popover content.My popover content.">
        </div>
    </div>

    <div class="row">
        <div class="col-xs-4">
            <label for="width-100">width: 100%</label>
            <input id="width-100" class="form-control" type="text"
                   data-toggle="popover"
                   data-trigger="click"
                   data-content="My popover content.My popover content.My popover content.My popover content.">
        </div>
    </div>

    <div class="row">
        <div class="col-xs-4">
            <label for="nowrap">white-space: nowrap</label>
            <input id="nowrap"...

CSS

#container {
    padding: 15px;
}

#position-fixed + .popover {
    position: fixed;
}

#width-100 + .popover {
    width: 100%;
}

#nowrap + .popover .popover-content {
    white-space: nowrap;
}

JavaScript

$('#placement-bottom').popover();
$('#original-issue').popover();
$('#position-fixed').popover();
$('#width-100').popover();
$('#nowrap').popover();