JSFiddle - React, Tailwind, and code Playground

HTML

<a class="botao tp" title="menu dropdown" href="javascript://">Clique aqui</a>
<ul class="dropDown">
    <li><a href="http://google.com.br/" target="_blank">DropDown! </a></li>
    <li><a href="https://github.com" target="_blank">Clique fora</a></li>
    <li><a href="http://www.youtube.com/" target="_blank">E veja o efeito</a></li>
    <li><a href="http://www.apple.com/" target="_blank">Lorem ipsum</a></li>
     
</ul>

CSS

*{
	margin:0;
	padding:0;
}
.botao{
	display: block;
	width: 160px;
	height: 30px;
	font-size: 14px;
    background: #e1e1e1;
    border-bottom: 2px solid #333;
    text-align: center;
    font-family: 'Arial';
    text-transform: uppercase;
    line-height: 30px;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
.botao:hover{
	background: #999;
	color: #fff;
}
.dropDown{
    display: none;
    list-style: none;
	float: left;
	width: 160px;
	height: auto;
	background: #333;
}
.dropDown li{
	display: block;
	width: 100%;
	height: auto;
}
.dropDown li a{
	display: block;
	float: left;
	width: 90%;
	border-top: 1px solid #555;
	font-family: 'Arial';
    font-size: 12px;
	color: #ccc;
	text-decoration: none;
    padding: 4% 0 4% 10%;
    text-transform: uppercase;
}
.dropDown li a:hover{
	background: #000;
	color: #fff;
	
}

.tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#161616;
	border-radius:5px;
	padding:5px;
	color:#fff;
	font-size:12px Arial;
}

JavaScript

$(document).ready(function() {
    //Cache dos elementos em variáveis
	var botao = $('.botao');
	var dropDown = $('.dropDown');    
    //Clica no botão para abrir e fechar o dropDown
    botao.on('click', function(event){
        dropDown.stop(true,true).slideToggle();
        //Evita que o evento seja notificado aos outros elementos. 
        event.stopPropagation();
    });
     
    //Clicando no html vai fechar o dorpDown
    $('html').on('click', function(){
         dropDown.slideUp();
    });
});

//Efeito Tooltip
$(document).ready(function() {
// Tooltip only Text
$('.tp').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('fast');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 5; //Get X coordinates
        var mousey = e.pageY + 5; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});
});