JSFiddle - React, Tailwind, and code Playground

by nickroberts

HTML

<script src="https://raw.github.com/nickroberts/bootstrap/3.0.0-wip/js/bootstrap-tooltip.js"></script>
<script src="https://raw.github.com/nickroberts/bootstrap/3.0.0-wip/js/bootstrap-popover.js"></script>
<div class="tip l-top" title="here is a tip" data-placement="top">Location: Top</div>
<div class="pop l-top" data-title="here is a title" data-content="here is some content to show where this popover will show on the screen" data-placement="top" data-trigger="hover">Location: Top</div>

<div class="tip l-bottom" title="here is a tip" data-placement="bottom">Location: Bottom</div>
<div class="pop l-bottom" data-title="here is a title" data-content="here is some content to show where this popover will show on the screen" data-placement="bottom" data-trigger="hover">Location: Bottom</div>

<div class="tip l-left" title="here is a tip" data-placement="left">Location: Left</div>
<div class="pop l-left" data-title="here is a title" data-content="here is some content to show where this popover will show on the screen" data-placement="left" data-trigger="hover">Location: Left</div>

<div class="tip l-right" title="here is a tip" data-placement="right">Location: Right</div>
<div class="pop l-right" data-title="here is a title" data-content="here is some content to show where this popover will show on the screen" data-placement="right" data-trigger="hover">Location: Right</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.tip,
.pop{
    cursor: pointer;
    display: inline-block;
    padding: .5em;
    margin: .5em;
    background: #eee;
    border: 1px solid #ccc;
    text-align: center;
}
.tip{
    background: #333;
    color: #eee;
}
.tip.l-top{
    left: 50%;
    margin-left: -106px;
    position: absolute;
    top: 0;
}
.tip.l-bottom{
    left: 50%;
    margin-left: -130px;
    position: absolute;
    bottom: 0;
}
.tip.l-left{
    left: 0;
    margin-top: -41px;
    position: absolute;
    top: 50%;
}
.tip.l-right{
    margin-top: -41px;
    position: absolute;
    right: 0;
    top: 50%;
}
.pop.l-top{
    left: 50%;
    margin-left: 5px;
    position: absolute;
    top: 0;
}
.pop.l-bottom{
    left: 50%;
    margin-left: 5px;
    position: absolute;
    bottom: 0;
}
.pop.l-left{
    left: 0;
    margin-top: 5px;
    position: absolute;
    top: 50%;
}
.pop.l-right{
    margin-top: 5px;
    position: absolute;
    right: 0;
    top: 50%;
}

JavaScript

$(document).ready(function(){
    $('.tip').tooltip({
        dynamicPos: true
    });
    $('.pop').popover({
        dynamicPos: true
    });
});