I updated joomla to J4.1.4 and now i am getting module information top right of all the modules.
-
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– Richard StephensJun 7 at 22:15
-
<div role="tooltip" id="tip-152">Edit Module<br>mainSlider<br>Position: banner</div>– Richard StephensJun 7 at 22:17
-
using the debugging console of firefox– Richard StephensJun 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– Richard StephensJun 7 at 22:30
|
Show 2 more comments
1 Answer
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.
