New tooltip replacing #6050

[infograf768]

See #6050

This solves the <strong> issue.

After patch (clear your caches) you should get:

[zero-24]

Travis is failing here :( maybe because of different html?

[roland-d]

@zero-24 Indeed, the unit tests fail due to the changed HTML. The unit test should be updated as well to reflect the change in HTML.

[infograf768]

I am trying to do that now.

[ghost]

@test Successfully tested with ISIS and current staging. ✅

[joomla-cms-bot]

This PR has received new commits.

CC: @bertmert

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8150.}

[infograf768]

CC: @adhocgraFX, @christianhent, @designbengel, @KingLouis1, @RoterNagel, @Yorgoz
Please test.

[fontanil]

@test
Patch is OK. Thanks!

[joomla-cms-bot]

This PR has received new commits.

CC: @bertmert, @fontanil

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8150.}

[infograf768]

@bertmert
Although we do not need to escape single quotes when using JText it does not cost much to do so in this precise context. Modified PR.

[infograf768]

@bertmert, @fontanil
Please retest and confirm on issues.joomla.org + test also
#8161

thanks

[fontanil]

@test
I confirm. Test OK

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8150.}

[ghost]

@test Tested successfully ✅ this PR in combination with #8161

[zero-24]

RTC for 3.5.0. Thanks

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8150.}

[dgrammatiko]

@infograf768 I like it a lot but I think if we go for a light colored tool tip we should apply some shadow around it (same as modal, popup, menus)
So here is a preview of that:

And the changes:
jui/tooltip.less after line 5

// Base class
.tooltip {
  position: absolute;
  z-index: @zindexTooltip;
  display: block;
  visibility: visible;
  font-size: 11px;
  line-height: 1.4;
  .opacity(0);
  .border-radius(@baseBorderRadius);
  &.in     { .opacity(80); }
  &.top    { margin-top:  -3px; padding: 0px 0; }
  &.right  { margin-left:  3px; padding: 0 5px; }
  &.bottom { margin-top:   3px; padding: 0px 0; }
  &.left   { margin-left: -3px; padding: 0 5px; }
}

and isis/template.less after line 1048

  .box-shadow(0 0 5px rgba(0,0,0,0.3));

Same thing for protostar

[roland-d]

@infograf768 Would you like to add @dgt41 suggestion to this PR?

[infograf768]

@dgt41

Pleaase contact me on glip

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8150.}

[infograf768]

@roland-d
I tested @dgt41 suggestion and It's missing something here.
Concerning Protostar, I suggest to do a separate PR

[roland-d]

@infograf768 Fine by me, then I will merge this as-is.

[infograf768]

@roland-d
Please wait I talked to @dgt41

[Bakual]

You guys are aware that Bootstrap already has a thing called "Popover" which would look exactly like that? See http://getbootstrap.com/2.3.2/javascript.html#popovers
Bootstrap tooltips aren't meant to contain a title or lengthy texts, that's what popver are designed for. The JS is the same, just a difference in appearance.

[infograf768]

Would not changing from tooltip to popovers be much more complex and maybe not B/C?

[infograf768]

@dgt41
After some modifications to your proposal, I can obtain this:

@Bakual
If you have a better idea, please propose some code.

[Bakual]

See #8174 for an idea how to use Popovers. You will see that they look about the same to what you try to do here.
So you basically remove tooltips from backend and make everything a popover.

The main issue is however that we did misuse tooltips back when we started using Bootstrap tooltips. They were never meant to show titles to begin with. We hacked around it instead of using the proper method 😄

[infograf768]

Folks, I succeeded in patching also Hathor, Beez and Protostar, but, doing so, I found out that this PR is not B/C at all for the other templates around because of the change in the library.
I.e. any template not updating their css will not get any more the tooltip title in bold and will keep the background colour and text colour the template maker has set.

I guess therefore that it is not the solution. Commented on @Bakual suggestion in #8174 (comment)

[zero-24]

Ok so for now we remove the milestone and label.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8150.}

[coolcat-creations]

I have tested this item ✅ successfully on 142ce1e

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8150.}

[joomla-cms-bot]

This PR has received new commits.

CC: @bertmert, @designbengel, @fontanil

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8150.}

[infograf768]

In case of, I also took care of Hathor, Beez and Protostar.
To test with English and an RTL language.

[ghost]

Even if I don't know if this PR is still relevant.
@test Tested successfully with all core templates BE and FE

Concerning BC and STRONG. The main conflict in the beginning was that STRONG was formatted as block. This has been removed now and .tooltip-title is block now.

So, I think changing line https://github.com/joomla/joomla-cms/pull/8150/files#diff-b01d47e3fbe4a8e5fb4987f4df64b291R920

to

$result = '<span class="tooltip-title"><strong>' . $title . '</strong></span>';

or

$result = '<span class="tooltip-title"><b>' . $title . '</b></span>';

could be a solution for BC

[ghost]

Found another issue with Hathor (not directly related to the changes of this patch but also same behavior with this patch).
#8434

[brianteeman]

@infograf768 I'm a bit confused on the status of this PR

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8150.}

[brianteeman]

I guess this PR is no longer needed.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/8150.}