Modifying Twitter Bootstrap's Tooltip Colors Based on Position

Modifying Twitter Bootstrap's Tooltip Colors Based on Position

Twitter bootstrap does not have this feature built in, but you could add your own functions to do this, like so:

$('#photo1').hover(function() {$('.tooltip').addClass('tooltipPhoto')}, function () {$('.tooltip').removeClass('tooltipPhoto')});​

and then you just have to define tooltipPhoto class in CSS to have a different background color.

EDIT:
Updated solution:

function changeTooltipColorTo(color) {
    $('.tooltip-inner').css('background-color', color)
    $('.tooltip.top .tooltip-arrow').css('border-top-color', color);
    $('.tooltip.right .tooltip-arrow').css('border-right-color', color);
    $('.tooltip.left .tooltip-arrow').css('border-left-color', color);
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', color);
}

$(document).ready(function () {
    $("[rel=tooltip]").tooltip();
    $('#photo1').hover(function() {changeTooltipColorTo('#f00')});
    $('#photo2').hover(function() {changeTooltipColorTo('#0f0')});
    $('#photo3').hover(function() {changeTooltipColorTo('#00f')});
});

Change Bootstrap tooltip color

You can use this way:

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Tooltip on bottom"
   class="red-tooltip">Tooltip on bottom</a>

And in the CSS:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}

jsFiddle

---

Moeen MH: With the most recent version of bootstrap, you may need to do this in order to get rid of black arrow:

.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}

---

Use this for Bootstrap 4:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}

Full Snippet:

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgba(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
  /* Red */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red */
  }
</style>

How to change placement of Twitter-Bootstrap tooltip placement after initialization?

In Bootstrap 2.x, the answer is as ajbeaven states:

$('#myTextbox').data('tooltip').options.placement = 'right';

However, from Bootstrap 3, all Bootstrap data is namespaced with bs:

$('#myTextbox').data('bs.tooltip').options.placement = 'right';

Change Bootstrap tooltip color

You can use this way:

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Tooltip on bottom"
   class="red-tooltip">Tooltip on bottom</a>

And in the CSS:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}

jsFiddle

---

Moeen MH: With the most recent version of bootstrap, you may need to do this in order to get rid of black arrow:

.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}

---

Use this for Bootstrap 4:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}

Full Snippet:

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgba(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
  /* Red */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red */
  }
</style>

Change the position of Bootstraps ToolTips

From the documentation

How to position the tooltip - top | bottom | left | right | auto.

When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.

Example:

<button class="btn btn-default" title="" data-placement="right"
data-toggle="tooltip" type="button" data-original-title="Tooltip on right"></button>

Change Twitter Bootstrap Tooltip content on click

Just found this today whilst reading the source code. So $.tooltip(string) calls any function within the Tooltip class. And if you look at Tooltip.fixTitle, it fetches the data-original-title attribute and replaces the title value with it.

So we simply do:

$(element).tooltip('hide')
          .attr('data-original-title', newValue)
          .tooltip('fixTitle')
          .tooltip('show');

and sure enough, it updates the title, which is the value inside the tooltip.

A shorter way:

$(element).attr('title', 'NEW_TITLE')
          .tooltip('fixTitle')
          .tooltip('show');

Re-color Tooltip in Bootstrap 4

As of Bootstrap 4.0

CSS for tooltip recoloring is handled by the .tooltip-inner class as you noticed:

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: .25rem;
}

Css for top arrow:

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 5px 5px 0;
    border-top-color: #000;
}

Css for right arrow:

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    margin-top: -3px;
    content: "";
    border-width: 5px 5px 5px 0;
    border-right-color: #000;
}

Css for bottom arrow:

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

Css for left arrow:

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    right: 0;
    margin-top: -3px;
    content: "";
    border-width: 5px 0 5px 5px;
    border-left-color: #000;
}

How can I make Twitter Bootstrap tooltips look like the popovers (without the title line)?

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

}

---

Related Topics