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-class="yellow" 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" data-txt="Hey 6!" 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;
}
.white {
    font-size: 20px;
    color: white;
    background: #000;
}

JavaScript

$('.pop').popover({
    trigger: 'hover',
    placement: 'bottom',
    html: true,
    content: function(){
        return '<span class="'+$(this).data('class')+'">'+$(this).data('txt')+'</span>';
    }
});