Place an icone with css in a div

Question

Guys I’m putting together a css with a Tooltip, it is working well. However I want to put a little arrow in the balloon of Tooltip, and it’s not working. I tried creating the following class .tooltip::after{ but I think I’m doing something wrong. Someone can help me?

Follow the code below. and the photo of the example 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>
<p class="masterTooltip" title="eqwjrh wejkrh weqj <br> welqk wel <br> lwjdnf ewlfj">passe o mouse</p>

Answer 1

If the question is just the arrow, I made some changes to its positioning, as well as the edge.

$(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{    
  position: absolute;
  content: '';
  left: -20px; /* dobro do width da borda => -2 * 10px */
  top: 2px; /* Metade do border-radius => Math.floor(5px / 2) */
  border: 10px solid transparent;
  border-right-color: #323232;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<p class="masterTooltip" title="eqwjrh wejkrh weqj <br> welqk wel <br> lwjdnf ewlfj">passe o mouse</p>

Answer 2

You can solve your problem like this:

            $(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;
}

/*Aqui é o estilo da seta*/
.tooltip::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 0;
  height: 0;
  position: absolute;
  top: 0px;
  left: -15px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #323232;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="masterTooltip" title="eqwjrh wejkrh weqj <br> welqk wel <br> lwjdnf ewlfj">passe o mouse</p>

I hope I’ve helped.
Source: http://tableless.com.br/fazendo-triangulos-triangle-arrows-com-css/