CODEWITHSUNDEEP
javascriptjqueryhtmlcsstooltip
Leo
Leo

Reputation: 977

Tooltip is not showing properly

Using the following JavaScript function I managed to show a static Tooltip with an arrow on hover. 

   $('.tooltip-basic').hover(function () {
      var title = $(this).attr('title');
      $(this).data('title', title).removeAttr('title');
      $('<p class="tooltip-basic-message"></p>').text(title).appendTo(this).fadeIn('slow');
   }, function () {
      $(this).attr('title', $(this).data('title'));
      $('.tooltip-basic-message').remove();
   });

However, I am struggling to position the arrow under the tooltip, and position the tooltip above its div no matter what height it has.

Here is a Fiddle: http://jsfiddle.net/xA8LS/3/

Upvotes: 1

Views: 3093

Answers (2)

DuyC
DuyC

Reputation: 11

in my experience in some cases tooltip will not display properly because of responsiveness, so if it's an in table item you should use

     $('[data-toggle="tooltip"]').tooltip({
            container: 'table',
    });

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240938

First off, the abbr element should be a block level element.

.tooltip-basic {
    position: relative;
    display:block;
}

Second, the :before pseudo element should be absolutely positioned - not relatively.

.tooltip-basic-message:before {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #285A98;
    content:"";
    display:block;
    width: 0;
    height: 0;
    position: absolute;
    bottom:-6px;
    left: 5px;
    z-index: 1;
}

Aside from that, some of the positioning needed to be changed.

Updated Example

Additionally, if you want the arrow centered:

Alternative Example

.tooltip-basic-message:before {
    left: 50%;
    margin-left: -2.5px;
}

Upvotes: 1

Related Questions