Popover Chooser

A custom designed twitter bootsrap popover

by Vaibhav Deshwal

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="choice-over"> <span class="btn choice-title">Language</span>
 <span class="btn choice-done">Python</span>

    <button type="button" class="btn choice" data-container="body" data-toggle="popover"> <i class="fa fa-caret-down"></i>

    </button>
</div>

CSS

body {
    padding: 2em 4em;
    background-color: #ecf0f1;
}
.choice-over {
    border: 1px solid #fff;
    display:inline-block;
    white-space: nowrap;
}
.choice-over>.choice-title, .choice-over>.choice-done {
    cursor: auto;
}
.choice-over>.choice-title {
    color: white;
    border-radius: 0;
    border: 0;
    margin-right: -3px;
    background-color: #C8CBCC;
    overflow: hidden;
    width: 6em;
}
.choice-over>.choice-done {
    background-color: white;
    border-radius: 0;
    border: 0;
    margin-right: -3px;
    width: 10em;
    text-align: left;
}
.choice-over>.choice-done:hover {
    color: #000;
}
.choice-over>.choice {
    border-radius: 0;
    text-align: center;
    width:3em;
}
.choice-over>.choice:hover {
    background-color:#C8CBCC;
    color:black;
}
.choice-over>.choice>i.fa:before {
    /*    -webkit-transition: all 0.9s ease;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;*/
}
.popover-content>span {
    display: inline-block;
    width: 6.5em;
    margin:0.2em;
    cursor: pointer;
    -webkit-transition: background-color 0.3s ease-out;
    -moz-transition: background-color 0.3s ease-out;
    -ms-transition: background-color 0.3s ease-out;
    -o-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
    padding-left: 0.3em;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    border: 1px solid transparent;
}
.popover-content {
    background-color: #ecf0f1;
}
.popover-content>span:hover {
    background-color: white;
    border: 1px solid #95a5a6;
}
.popover {
    max-width: 350px;
    -webkit-transition: top .15s ease-in-out, opacity 0.15s linear;
    -moz-transition: top .15s ease-in-out, opacity 0.15s linear;
    -ms-transition: top .15s ease-in-out, opacity 0.15s linear;
    -o-transition: top .15s ease-in-out, opacity 0.15s linear;
    transition: top .15s ease-in-out, opacity 0.15s linear;
}

JavaScript

var lang_options = "<span>C</span><span>C++</span><span>Python</span>" + "<br/>" + "<span>Java</span><span>Ruby</span><span>O'caml</span>" + "<br/>" + "<span>ObjectiveC</span><span>Haskell</span><span>Php</span>";
$(".choice").popover({
    html: true,
    animation: 'true',
    placement: 'bottom',
    title: 'Language Options',
    content: lang_options
});