Styling a tooltip (popper.js / bootstrap v4 beta)

by

The structure of the tooltip is described in the docs. To change the style you need to override tooltip-inner and arrow:

Update for Bootstrap 4.0.0

Demo

.tooltip-inner {
    background-color: #00cc00;
}
.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #00cc00 !important;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #00cc00 !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #00cc00 !important;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #00cc00 !important;
}

(where #00cc00 is the desired tooltip color)

More Related Contents:

  1. Show data on mouseover of circle
  2. JFreeChart create tooltip in ChartPanel
  3. How do I hide the tooltip ‘title’ when using a lightbox plugin
  4. Want to make a multi page navigation menu “HTML, JS, jQuery, Bootstrap” [closed]
  5. Trying to work on responsiveness of login form
  6. Bootstrap row with columns of different height
  7. Order columns through Bootstrap4
  8. Center an element in Bootstrap Navbar
  9. How to extend/modify (customize) Bootstrap with SASS
  10. Bootstrap change navbar color
  11. Is it possible to format an HTML tooltip (title attribute)? [duplicate]
  12. How can I keep Bootstrap popovers alive while being hovered?
  13. How can I create a “tooltip tail” using pure CSS?
  14. Bootstrap – align button to the bottom of card
  15. Customize Bootstrap 4’s grid-system Breakpoints
  16. Bootstrap 4: Uncaught ReferenceError: Popper is not defined
  17. Bootstrap 4 – Responsive cards in card-columns
  18. Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical
  19. Tooltip with HTML content without JavaScript
  20. How to left column fixed and right scrollable in Bootstrap 4, responsive?
  21. How can I change the order of Bootstrap columns?
  22. Bootstrap 4 custom build generator / download [duplicate]
  23. how do you add an image to a jquery tooltip
  24. How to create a tooltip? [duplicate]
  25. ToolTip when you mouseover a ggplot on shiny
  26. ml-auto is not pushing navbar links to the right
  27. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  28. How to make a Bootstrap 4 full width dropdown in Navbar?
  29. Bootstrap Navbar list items/links not showing
  30. Data tooltips in Bokeh don’t show data, showing ‘???’ instead

Leave a Comment