I'm setting up a css with Tooltip
, it's working fine. But I want to put a small set in the Tooltip
balloon, and it's not working. I've tried creating the following class .tooltip::after{
but I think I'm doing something wrong. Can anyone help me?
Follow the code below. and the example photo I want to do:
$(document).ready(function () {
$('.masterTooltip').hover(function () {
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').html(title).appendTo('body').fadeIn('fast');
}, function () {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function (e) {
// Get X Y cordenadas
var mousex = e.pageX + 20;
var mousey = e.pageY + -20;
$('.tooltip').css({top: mousey, left: mousex});
});
});
.tooltip {
display:none;
position:absolute;
border:1px solid #616161;
background-color:#323232;
border-radius:5px;
padding:10px;
color:#FFFFFF;
}
.tooltip::after{
content: '';
width: 0;
height: 0;
display: block;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: -35px;
border: 7px solid rgba(0, 0, 0, 0);
border-bottom-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><pclass="masterTooltip" title="eqwjrh wejkrh weqj <br> welqk wel <br> lwjdnf ewlfj">passe o mouse</p>