SOURCE

// console.log(undefined == null);
// console.log(true == 1);
// console.log("1" == 1);
// console.log()

<!-- 
<div id="triangle"></div>
<style>
    #triangle{
        width:0px;
        height:0px;
        border-top:40px solid transparent;
        border-left:40px solid transparent;
        border-right:40px solid transparent;
        border-bottom:40px solid red;
    }
</style> -->

<!-- <div id="top"></div>
<div id="bottom-left"></div>
<div id="bottom-right"></div>

<style>
    *{
        margin:0;
        padding:0;
    }
    div{
        width:100%;
        height:100px;
        line-height:100px
    }
    #top{
        background-color:red;
        margin:0 auto 0;
    }
    #bottom-left{
        background-color:green;
        width:50%;
        float:left;
    }
    #bottom-right{
        background-color:blue;
        width:50%;
        float:right;
    }
</style> -->
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
<style>
    .tooltip{
        display:inline-block;
        border-bottom:dotted;
        position:relative;
    }
    .tooltip .tooltiptext{
        
    }
</style>