12

I'd like to replace the Twitter Bootstrap tooltip styles with the popover styles. How can I do that?

Tooltips look like this by default:

Tooltip

Popovers look like this by default:

enter image description here

I'd like my tooltips to be white, with a gray border, just like the popovers.

Can you help?

Ryan
  • 14,682
  • 32
  • 106
  • 179
  • 1
    Have you tried replacing the tooltip css with the popover css? – Christian Apr 30 '13 at 15:34
  • Maybe you can show the popover on hover instead of the tooltip? Example: http://stackoverflow.com/a/12343706/291541 – Getz Apr 30 '13 at 15:40
  • Sorry, I have to ask why you just don't use all popovers? :) – Billy Moat Apr 30 '13 at 15:40
  • @BillyMoat, yes, I'm using Popovers too. ;) But I'm planning on tooltips as hoverable, simplified tooltips (only text, one line, smaller padding, smaller text). I can change the background of the tooltip just fine. But I can't figure out the border. – Ryan Apr 30 '13 at 15:43
  • The tooltip divs that are generated have a class of 'tooltip'. In your custom css file just add the styles from the popover to a new definition of .tooltop in there. The Bootstrap popovers have a class of 'popover' you can examine to get the code. – Billy Moat Apr 30 '13 at 15:47
  • @ChristianVarga, yes, I manually worked it out that way. Thanks. – Ryan Apr 30 '13 at 16:40
  • 2
    You can use `$('#my-thing').popover({trigger: 'hover'});` to make popover appear on mouse over – Glogo Jun 30 '15 at 12:15
  • Take a look here http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php – NoWar Dec 02 '15 at 00:55

6 Answers6

9

If you want to change the style for the tooltip itself you would have to edit the .tooltip-inner class in bootstrap's css file or override the .tooltip-inner class with a class of your own.

An example for the border would be: 

.tooltip-inner {
    border: solid 1px #ccc;
}
philipcdavis
  • 204
  • 1
  • 3
  • thanks. I added background and color styles, as well as the tooltiparrowcolor variable. However, I can't get the border around the arrow or the arrow in front of the tooltip-inner. Instead the arrow falls outside the border. Can you point me in the right direction with the whole package? – Ryan Apr 30 '13 at 16:17
  • 4
    The `.tooltip-arrow` class is what controls the color, size, and position of the arrow. You can't add a border to the arrow because the border is what is making the shape of the arrow. However, you can position the arrow 1px higher so that the border isn't covering the arrow. To do this, change the `bottom:0px` to `bottom:1px` in the `.tooltip.top .tooltip-arrow` section (If you are using the top tooltip etc.). – philipcdavis Apr 30 '13 at 16:34
6

Here's how I got it to work:

Add to variables.less

@tooltipArrowOuterWidth:  @tooltipArrowWidth + 1;
@tooltipArrowOuterColor:  rgba(0,0,0,.25);

Add to custom LESS file

// Tooltip
// --------------------------------------------------
.tooltip.in { .opacity(100); }

.tooltip-inner {
    background:@popoverTitleBackground;
    color:@gray;
}
.tooltip .arrow {
    border-width: @tooltipArrowOuterWidth;
}


.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: @zindexPopover;
  display: none;
  max-width: 276px;
  padding: 1px;
  text-align: left; // Reset given new insertion method
  background-color: @popoverBackground;
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  .border-radius(6px);
  .box-shadow(0 5px 10px rgba(0,0,0,.2));

  // Overrides for proper insertion
  white-space: normal;

  // Offset the popover to account for the popover arrow
  &.top     { margin-top: -10px; }
  &.right   { margin-left: 10px; }
  &.bottom  { margin-top: 10px; }
  &.left    { margin-left: -10px; }
}

.tooltip-inner {
  margin: 0; // reset heading margin
  padding: 4px 8px;
  font-size: @baseFontSize * 0.9;
  font-weight: normal;
  line-height: 18px;
  background-color: @popoverTitleBackground;
  border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
  .border-radius(5px 5px 0 0);

  &:empty {
    display: none;
  }
}

// Arrows
//
// .arrow is outer, .arrow:after is inner

.tooltip .tooltip-arrow,
.tooltip .tooltip-arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip .tooltip-arrow {
  border-width: @tooltipArrowOuterWidth;
}
.tooltip .tooltip-arrow:after {
  border-width: @tooltipArrowWidth;
  content: "";
}

.tooltip {
  &.top .tooltip-arrow {
    left: 50%;
    margin-left: -@tooltipArrowOuterWidth;
    border-bottom-width: 0;
    border-top-color: #999; // IE8 fallback
    border-top-color: @popoverArrowOuterColor;
    bottom: -@tooltipArrowOuterWidth;
    &:after {
      bottom: 1px;
      margin-left: -@tooltipArrowWidth;
      border-bottom-width: 0;
      border-top-color: @tooltipArrowColor;
    }
  }
  &.right .tooltip-arrow {
    top: 50%;
    left: -@tooltipArrowOuterWidth;
    margin-top: -@tooltipArrowOuterWidth;
    border-left-width: 0;
    border-right-color: #999; // IE8 fallback
    border-right-color: @tooltipArrowOuterColor;
    &:after {
      left: 1px;
      bottom: -@tooltipArrowWidth;
      border-left-width: 0;
      border-right-color: @tooltipArrowColor;
    }
  }
  &.bottom .tooltip-arrow {
    left: 50%;
    margin-left: -@tooltipArrowOuterWidth;
    border-top-width: 0;
    border-bottom-color: #999; // IE8 fallback
    border-bottom-color: @tooltipArrowOuterColor;
    top: -@tooltipArrowOuterWidth;
    &:after {
      top: 1px;
      margin-left: -@tooltipArrowWidth;
      border-top-width: 0;
      border-bottom-color: @tooltipArrowColor;
    }
  }

  &.left .tooltip-arrow {
    top: 50%;
    right: -@tooltipArrowOuterWidth;
    margin-top: -@tooltipArrowOuterWidth;
    border-right-width: 0;
    border-left-color: #999; // IE8 fallback
    border-left-color: @tooltipArrowOuterColor;
    &:after {
      right: 1px;
      border-right-width: 0;
      border-left-color: @tooltipArrowColor;
      bottom: -@tooltipArrowWidth;
    }
  }

}
Ryan
  • 14,682
  • 32
  • 106
  • 179
  • 1
    This is great, but i dont think is good idea to change bootstrap original variables.less, what if new version get out, than you must be carefull :( – Schneider Oct 21 '14 at 04:51
4

JQuery UI is interfering with bootstrap.

They aren't really compatible with each other as they overlap in a lot of functionality.

I had this problem a few weeks back and found this page but I didn't want to start adding custom css for something that should 'just work'. After removing JQuery UI today (for another reason) I noticed the tool-tips started looking as intended. I know this is an old question but I would have found this answer useful a few weeks ago.

S. Newsham
  • 49
  • 4
  • Thank you for this. My tooltips wern't styled in anyway just text appearing, and thanks to your comment I checked and it was because of jquery UI. Not sure I would gotten that on my own. So thank you for the hours of headaches saved! – Chud37 Jun 06 '18 at 12:50
2

JS

$(function() {
    $('[title]').attr("data-rel", "tooltip");
    $("[data-rel='tooltip']")
        .attr("data-placement", "top")
        .attr("data-content", function() {
            return $(this).attr("title")
        })
        .removeAttr('title');


    var showPopover = function() {
        $(this).popover('show');
    };
    var hidePopover = function() {
        $(this).popover('hide');
    };
    $("[data-rel='tooltip']").popover({
        trigger: 'manual'
    }).click(showPopover).hover(showPopover, hidePopover);

});

And simple HTML

<h1 title="This is title">What is this</h1>
Ryan
  • 14,682
  • 32
  • 106
  • 179
Schneider
  • 2,446
  • 6
  • 28
  • 38
2

Here is what worked for me on a right-side tooltip.

I just took a CSS triangle of the same size as the arrow, and then pulled it away from the Bootstrap triangle by the same distance as the width of the border. Adapt as needed, and you can refer to this awesome article for reference on how to make a triangle pointing in any direction:

http://css-tricks.com/snippets/css/css-triangle/ 

.tooltip .tooltip-inner {
  background: white;
  color: black;
  border: 3px solid black;
  padding: 10px;
  line-height: 1.65em;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -15px;
  border-right-color: white;
  border-width: 15px 15px 15px 0;
}
.tooltip.right .tooltip-arrow:after {
  content: " ";
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid black;
  top: -15px;
  left: -3px;
}
doronorenstein
  • 49
  • 1
  • 7
2

Since the best answer was hiding in the comments to the question and wasn't visible at first, I've ended up finding out the solution on my own. It was easiest way in my case to use popover instead of tooltip with triggering it on hover event. In order to do that you have 2 options:

You may use attribute 'data-trigger':

<td id="3" data-content="Tooltip text" data-placement="bottom" data-    container="body" data-trigger="hover" data-original-title="" title="">This tooltiped</span></td>

or use option 'trigger' on popover initialization:

$('.payment').popover({
    trigger: "hover",
})
Oleg
  • 69
  • 2
  • 7