Personally I really like this change as I find it much easier to read the important information that we put in our tooltips this way.

Before

After

The PR has changed all tabs to spaces. Please correct.

This must be something that Notepad++ is doing. I do not know how to correct this.

See Edit->Blank Operations

Thanks @sovainfo
I think they should be okay now.

Do I have to do this Edit -> Blank Operations -> Space to Tab every time?

Personally not a fan of the difference in colours between the background of the title and main body of text in the tooltip. I don't think it gives any accessibility and I personally dislike it from a UI perspective...

Actually I have always found the tooltips a little hard to read. Having the title separated from the main text here is no different from the modals we have. I do like this change.

Sorry but the patch is not OK, Some spaces are changed by tabs when not necessary and so on. This creates an enormous PR for no reason.

Can you just post here the simple changes -and nothing else- you are doing in the .less files.
Then I will try to help by generating the PR for you.

variables.less

@tooltipColor: #111;
@tooltipBackground: #fff;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: #ddd;

template.less

/* Tweaking of tooltips */
.tooltip {
max-width: 400px;
.opacity(0);
&.in { .opacity(100); }
}
.tooltip-inner {
max-width: none;
text-align: left;
text-shadow: none;
padding: 6px 8px;
font-size: @baseFontSize;
border:1px solid #aaa;
}
.tooltip-inner strong{
display:block;
margin:-6px -8px -12px;
padding:6px 10px;
background:@tableBackgroundHover;
.border-radius(@baseBorderRadius @baseBorderRadius 0 0);
}
.tooltip {
&.top .tooltip-arrow {
border-top-color: @tooltipArrowColor;
}
&.right .tooltip-arrow {
border-right-color: @tooltipArrowColor;
}
&.left .tooltip-arrow {
border-left-color: @tooltipArrowColor;
}
&.bottom .tooltip-arrow {
border-bottom-color: @tooltipArrowColor;
}
}
th .tooltip-inner {
font-weight: normal;
}
.tooltip.hasimage {
opacity: 1;
}

@infograf768
Sorry for the bother.
You'll be happy to know I am setting up TortoiseGit.

Please test
#6050

After tested, we can delete this one.

@rgmears thank you for this valuable change - white text on a black background is barely readable for me.

@Hils
Can you test #6050 ?

We've adopted Bootstrap as a standard, so the closer we stick to that standard the better.

People expect an Boostrap-powered admin to look like a Bootstrap-powered admin and every change that we make away from the BS norm brings an additional maintenance burden and further complicates the future need to migrate to a newer version of Bootstrap (or other framework).

Honestly, I think if you want to change the way Bootstrap tooltips appear then the place to do it is in the Bootstrap repo.

Personally I really like this change as I find it much easier to read the important information that we put in our tooltips this way.

Large amounts of information like this are more suited to popovers: http://getbootstrap.com/2.3.2/javascript.html#popovers

Tooltips were never intended to be used like this.

agreed

On 11 February 2015 at 13:38, Seth Warburton notifications@github.com
wrote:

Personally I really like this change as I find it much easier to read the
important information that we put in our tooltips this way.

Large amounts of information like this are more suited to popovers:
http://getbootstrap.com/2.3.2/javascript.html#popovers

Tooltips were never intended to be used like this.

—
Reply to this email directly or view it on GitHub
#6022 (comment).

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

We've adopted Bootstrap as a standard, so the closer we stick to that standard the better.

Whether it is for 'large' amounts or not (the example above is one), this change is welcome as indeed much more readable. We already had to modify bootstrap for many things like RTL.

I'm not arguing that readability is not improved, I'm arguing against continued deviation from Bootstrap norms as it creates an unwanted maintenance overhead and further weakens every argument there was for adopting Bootstrap in the first place.

Eaxmple: Component Dev A wishes to give his components tooltips (black ones because Component Dev A loves Bootstrap and thinks they look awesome), checks code examples at Bootstrap Docs, implements that and gets tooltips that look nothing like the Bootstrap examples. Component Dev A is not happy with whoever changed this in Joomla and feels the “Golden Bootstrap Promise” has been violated.

Reasons given, at the time, for adopting Bootstrap:

1. It looks awesome, we all love the way everything looks. There's no way we could do better than that!
2. It's fully documented. If I copy paste example code from Bootstrap docs I'll get exactly what I can see at Bootstrap Docs! Yay!!
3. It's standardised. …Except in Joomla, where we've changed loads of stuff and failed to document the changes.

Maybe large amounts of important text would be better displayed inside popovers?

Let's face it, readability and accessibility was never high on the Bootstrap priority list in the first place and trying to build that in now is like trying to prepare a 1990 Ford Escort to compete in the Le Mans 24hr. To stand any chance of succeeding you must remove and replace every part of the Escort.

Tooltips and Popovers are very close in what they do. Imho the tooltips are meant to show without title, best used with a single line of text. Popovers on the other hand are very nice if you have a title and a bit more text. So @nternetinspired sure has a point here, but it's not that easy to change since it's a default behaviour in the form. Changing this to popovers very likely will break something somewhere.

On the other hand it's absolutely fine to adjust default BS and especially colors in a template. Bootstrap was never meant to be used as is, It's meant as a base to build on.
So I don't see a reason why we can't improve that here,

I agree @nternetinspired with sticking to the core is important, I was under the impression that the new look was actually the BS look :) As @Bakual said, there should be room to improve it.

Just an idea.

Perhaps this change could be rolled into a new improved accessible template
to replace hathor

One idea is to combine accessibility with isis, e.g. https://github.com/paypal/bootstrap-accessibility-plugin
and drop hathor altogether...

First up, apologies for my brusque responses earlier. I'm unwell today and wasn't in a good mood at all this morning. Sorry.

I completely agree that this PR improves readability and I'm 100% in favour of improving accessibility, but I did want to raise the point that there are repercussions to deviating from the Bootstrap norm and these may become pain-points in future. I also think we are using tooltips for things that they were never designed to be used for.

Ultimately, I think large amounts of info like this should be using popovers though, as @Bakual mentions, that is not a trivial change to make.

Perhaps this change could be rolled into a new improved accessible template
to replace hathor

Perhaps this change could be rolled into a new improved accessible template
to replace hathor and Isis.

The idea that accessibility concerns only people with disabilities is something I think we need to get past. Accessible interfaces are those that are made to work for people. It is not only people with visual acuity impairments that find 12px text hard to read. It is not only people with physical disabilities that navigate web pages using keyboards. These are serious misconceptions and we should treat them as such.

What Joomla needs most right now is an intuitive and user friendly admin UI and I don't honestly see how that can be achieved by tweaking either Hathor or Isis and I'd rather see time spent on developing a viable alternative.

I would prefer to just have ONE admin template that is fully accessible but
I acknowledge the BC roadmap and that it would be "hard" to replace either
template so I meant to say (I too answered quickly before) an additional
template that would be awesome and that everyone would use as the default
and that is fully accessible etc

On 13 February 2015 at 18:56, Seth Warburton notifications@github.com
wrote:

First up, apologies for my brusque responses earlier. I'm unwell today and
wasn't in a good mood at all this morning. Sorry.

I completely agree that this PR improves readability and I'm 100% in
favour of improving accessibility, but I did want to raise the point that
there are repercussions to deviating from the Bootstrap norm and these may
become pain-points in future. I also think we are using tooltips for things
that they were never designed to be used for.

Ultimately, I think large amounts of info like this should be using
popovers though, as @Bakual https://github.com/Bakual mentions, that is
not a trivial change to make.

Perhaps this change could be rolled into a new improved accessible template
to replace hathor

Perhaps this change could be rolled into a new improved accessible
template
to replace hathor and Isis.

The idea that accessibility concerns only people with disabilities is
something I think we need to get past. Accessible interfaces are those that
are made to work for people. It is not only people with visual acuity
impairments that find 12px text hard to read. It is not only people with
physical disabilities that navigate web pages using keyboards. These are
serious misconceptions and we should treat them as such.

What Joomla needs most right now is an intuitive and user friendly admin
UI and I don't honestly see how that can be achieved by tweaking either
Hathor or Isis and I'd rather see time spent on developing a viable
alternative.

—
Reply to this email directly or view it on GitHub
#6022 (comment).

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

Having one template is going to be a lot of work I imagine (it is not my field of expertise), but we should then get it on the radar for 4.0 then. It surely sounds like a very good idea.

On the tooltip: just remove the opacity seems a good enough measure for the time being
On a new accessible template: there is a mention on the roadmap I think 3.10 or something
BUT to even start talking for the new template there are some milestones that have to be reached:
1. Layouts
2. Bridge bs2 with bs3 (css)
3. Bridge bs2 with bs3 (js)

I had no idea this simple change, that improves legibility — as everyone agrees — of an oft' used element, would be so controversial. Out of curiosity how do tooltips display in Bootstrap 3?

BS3 tooltip: http://getbootstrap.com/javascript/#tooltips
Almost the same, but no opacity

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

Not sure why anyone would use such small white text on a black background.

As someone who is undergoing 'vision trauma' currently, I understand completely when people, including me, say they cannot read small white text on a black background. I can't so no, just changing opacity is not enough. We shouldn't do style over function.
I will test when it is ready to test :)

@Hils
Legibility is the dominant criterion in text-based graphic design.

Apparently, this topic has evolved into a discussion about a yet-to-be-defined-created-tested new future unique template that would be perfect and accessible, but that can't be as bootstrap is not implementing the necessary changes proposed here and normalized in #6050

A bit harsh statement, I know.
Let's make things work right for us 'now', as we already had to do with bootstrap anyway since it got into Joomla.
After all we are not here modifying bootstrap itself, but just Isis .less and .css.

Please test/confirm #6050 and let's get it in.
3.4.0 users will love it.

Closing in favor of
#6050