Does any know how to edit the default tooltip in joomla 3.6, i cant seem to find the classes in the CSS files.

  • Are you using a specific template that has custom tooltips? If not, It is not possible to style the default browser ones with CSS alone. – YellowWebMonkey Oct 25 '16 at 20:59
  • i'm using the standard template that came with joomla 'protostar' – user2513528 Oct 25 '16 at 21:09
  • I take it i need a template with bootstrap – user2513528 Oct 25 '16 at 21:10

Firstly, if your template has a custom.css file, open it, else create this file in your template's CSS directory.

The following code you'll need to edit the base styling of the tooltip is here:

.tooltip {
  position: absolute;
  z-index: 1030;
  display: block;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: visible;

.tooltip.in {
  opacity: 0.8;
  filter: alpha(opacity=80);

.tooltip-inner {
  max-width: 200px;
  padding: 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;

If you also wish to edit the tooltip arrows, you'll need this too:

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top-color: #000000;
  border-width: 5px 5px 0;

.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-right-color: #000000;
  border-width: 5px 5px 5px 0;

.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-left-color: #000000;
  border-width: 5px 0 5px 5px;

Change the styling to whatever suits your needs

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.