0

I updated joomla to J4.1.4 and now i am getting module information top right of all the modules.

enter image description here

7
  • Thanks for joining and posting your question, Richard. Please take our tour. Do you mean "top left"? I don't see any tooltips.
    – mickmackusa
    Jun 7 at 22:01
  • yes sorry top left Jun 7 at 22:15
  • <div role="tooltip" id="tip-152">Edit Module<br>mainSlider<br>Position: banner</div> Jun 7 at 22:17
  • using the debugging console of firefox Jun 7 at 22:18
  • <div style="border: 0px !important;"> <a class="btn btn-link jmodedit" href="enlo.co.uk/…" target="_self" aria-describedby="tip-152"> <span class="icon-edit" aria-hidden="true"></span><span class="visually-hidden">Edit</span></a> <div role="tooltip" id="tip-152">Edit Module<br>mainSlider<br>Position: banner</div> <div id="djslider-loader152" class="djslider-loader djslider-loader-default" data-animation='{"auto":"1","looponce":"0","transition":"easeInOutExpo","css3transitio Jun 7 at 22:30

1 Answer 1

1

The tooltips are meant to appear when logged in with a user authorized to edit modules and frontend editing is enabled. If you are not logged in, you should check permission settings, there could be some serious misconfiguration.

As to why the tooltips appear this way is because your template has no styling applied to them. Unfortunately, Joomla does not provide styling library for common utilities like tooltips. You have to inspect the stylesheets of core templates to figure things out. Instead of targeting a class, core templates apply tooltip styling to all elements with role="tooltip" attribute. This, for example, is the CSS code used in Cassiopeia template:

[role=tooltip]:not(.show) {
  right: 5em;
  z-index: 1070;
  display: none;
  max-width: 100%;
  padding: 0.5em;
  margin: 0.5em;
  color: black;
  text-align: start;
  background: white;
  border: 1px solid #6d757e;
  border-radius: 0.25rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.8);
}
[role=tooltip]:not(.show)[id^=editarticle-] {
  right: auto;
  -webkit-margin-start: -10em;
          margin-inline-start: -10em;
}
[role=tooltip]:not(.show)[id^=editcontact-] {
  right: auto;
  -webkit-margin-start: -10em;
          margin-inline-start: -10em;
}
[role=tooltip]:not(.show)[id^=id-skip-] {
  right: auto;
}

:focus + [role=tooltip],
:hover + [role=tooltip] {
  position: absolute;
  display: block;
}

.filter-search-bar__description {
  bottom: 100%;
}

And, yes, even .filter-search-bar__description rule is related to tooltips. 3rd party extensions might need additional workarounds to make tooltips work properly.

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.