JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.0/underscore.string.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<table>
    <tr>
         <td onmouseover="displaythis('dial_b')" id="dial_b">
            Hover here 1
        </td>
    </tr>
    <tr>
        <td onmouseover="displaythis('dial_a')" id="dial_a">
            Hover here 2
        </td>
    </tr>
</table>

JavaScript

function displaythis(i){

    if(i=="dial_a"){
    $popover = $('#dial_a').popover({ 
        trigger: "hover",
        placement: "bottom",
        title:"Dial A",
        content:"<div>THIS IS A</div>"
    }).popover('show');
    }
    
    if(i=="dial_b"){
    $popover = $('#dial_b').popover({ 
        trigger: "hover",
        placement: "bottom",
        title:"dIAL b",
        content:"<div>THIS IS B</div>"
    }).popover('show');
    }
    
}