popover

by Artur Filipiak

HTML

<table>
    <tr>
		<td><a class="pop" data-class="red" data-txt="Hey 1!" title="">Content 1</a></td>       
		<td><a class="pop" data-txt="Hey 2!" title="">Content 2</a></td>
		<td><a class="pop" data-class="grey" data-txt="Hey 3!" title="">Content 3</a></td>
        <td><a class="pop" data-class="pink" data-txt="Hey 4!" title="">Content 4</a></td>       
		<td><a class="pop" data-class="blue" data-txt="Hey 5!" title="">Content 5</a></td>
		<td><a class="pop" data-class="black" data-txt="Hey 6!" title="">Content 6</a></td>
        <td><a class="pop" data-class="white" title="">Content 7</a></td>
	</tr>
</table

CSS

.red {
    font-size: 10px;
    color: red;
}
.yellow {
    font-size: 30px;
    color: yellow;
}
.grey {
    font-size: 20px;
    color: grey;
}
.pink {
    font-size: 15px;
    color: pink;
}
.blue {
    font-size: 7px;
    color: blue;
}
.black {
    font-size: 50px;
    color: black;
}
.brown {
    font-size: 50px;
    color: brown;
}
.white {
    font-size: 20px;
    color: white;
    background: #000;
}

JavaScript

function template(el){
    
    var textArray = [
        'Missing text? No worries...',
        'Blah!',
        'OMG',
        'That\'s it...',
        ':)'
    ];
    
    var classes = [
        'red',
        'blue',
        'brown',
        'white',
        'black'
    ];
    
    var cls = el.data('class') || classes[Math.floor(Math.random()*classes.length)];
    var txt = el.data('txt') || textArray[Math.floor(Math.random()*textArray.length)];
    return '<span class="'+cls+'">'+txt+'</span>';
}

$('.pop').popover({
    trigger: 'hover',
    placement: 'bottom',
    html: true,
    content : function(){
        return template($(this));
    }
});