BS4 tooltips stopped working

bpj · February 8, 2021, 9:51am

Wappler Version : 3.7.4
Operating System : Big Sur (M1)
Server Model: PHP
Database Type: MySQL
Hosting Type: AWS Docker

Expected behavior

What do you think should happen?

Tooltips should appear on hover when added to an item

Actual behavior

What actually happens?

My button has the following code

But the tooltip never shows

The page is a route page and has dmxBootstrap5Tooltips:{} (not BS4) in the include section at at the top of the code and was working until I updated to 3.7.4

I have noticed both the BS4 and BS5 scripts are included on my head page - not sure if that might be causing a conflict?

I'm sure both includes were already there before the latest update but they all of a sudden don't show.
I am still on BS4 and haven't even looked at converting to BS5.

How to reproduce

Detail a step by step guide to reproduce the issue

A screenshot or short video indicating the problem

A copy of your code would help. Include: JS, HTML.

Test your steps on a clean page to see if you still have an issue

Add a tooltip dynamic attribute (I have a ternary expression but have tried it with a fixed value too)

adds this to the button element:

dmx-bs-tooltip="faystatus == 'active' ? 'Disable form for this academic year' : 'Re-enable this form for this acadmic year'"

Actual rendered HTML above

bpj · February 8, 2021, 11:40am

Could this be down to the tooltips being initiated on DOMContentLoaded? I presume this doesn’t then initiate for dynamic items created after this point?

The tooltip-title properties are on the elements and I can initiate them from the browser console

bpj · February 8, 2021, 12:41pm

I’ve added a patch-fix to the BS5Tooltips JS which works for me for now (I had a demo scheduled for tomorrow that I wanted it to work for). I also added a line to default to ‘auto’ placement if not specifically defined. Having the option for auto would be nice at some point.

dmx.Attribute('bs-tooltip', 'mounted', function (node, attr) {
  this.$addBinding(attr.value, function (value) {
    node.setAttribute('tooltip-title', value || '');
  })
  new bootstrap.Tooltip(node, {
    placement: function () {
      var pexpression = node.getAttribute('data-placement') || 'auto';
      return dmx.parse(pexpression) || node.getAttribute('data-placement') || 'auto';
    },
    trigger: 'hover',
    title: function () {
      var expression = this.getAttribute('dmx-bs-tooltip') || '';
      return dmx.parse(expression) || this.getAttribute('tooltip-title') || '';
    }
  });
});

I’ll adjust back to the original JS once done and wait for a proper update fix

bpj · February 15, 2021, 7:19pm

Thanks @patrick

patrick · February 15, 2021, 9:44pm

Mine ended up a little different then your version, here the updated version for you to test.

dmxBootstrap5Tooltips.zip (520 Bytes)

bpj · February 16, 2021, 9:56am

Thanks @patrick
That seems to work (with some very quick tests)

There’s a similar-ish problem with the popovers. If the dmx-bs-popover is added by the UI, it doesn’t translate into the content (the title is added but the content isn’t)
on my page I have added a popover attached to buttons (in a repeat) using the UI:

<button id="btn10a" dmx-bind:id="btn10{{$key}}" class="btn btn-secondary btn-block btn-sm" data-html="true" data-placement="auto" dmx-bind:popover-title="$key" dmx-bs-popover="extended">
Full desc</button>

which produces the following code on page:

And a popover with title but no content (attached to the full desc. button)

If I add the content as

dmx-bind:data-content="extended"

it works fine

I appreciate it’s not the very same issue - if you want it as a separate bug report, I can create one.

patrick · February 16, 2021, 10:41am

The popovers also have been updated, here the new file.

dmxBootstrap5Popovers.zip (555 Bytes)

Dave · February 16, 2021, 10:54am

Stupid question @patrick. I see the above fix is for Bootstrap5, and the thread is Bootstrap4 related? Is this the same file for both version of Bootstrap?

bpj · February 16, 2021, 10:58am

I think it needs just one change to the popover code switch popoverTriggerEl for this (the former is not defined)

Once changed it appears to work well.

Thanks again @patrick

bpj · February 16, 2021, 11:02am

I’m still on BS4 and it applies to me even though it is the BS5 files being changed. I think some elements are roughly the same code-wise for BS4 and BS5 - in this case following the BS shift to vanilla JS, the triggering by jQuery has been removed to work with whichever framework version you are using.

bpj · February 16, 2021, 11:09am

There is something…
The default in the new popover code is for ‘hover’ but in the UI default for popover is ‘click’ where no data attribute is set. It makes it currently impossible to set click as the trigger in the UI unless in code view.

patrick · February 16, 2021, 11:14am

Thx, popoverTriggerEl should be document.body. Will change that. The trigger can be left away indeed, was copied to much from the tooltips. I have also added the placement here like with the tooltips with the default to auto.

This is the new code:

// Bootstrap 5 Popovers
dmx.Attribute('bs-popover', 'mounted', function(node, attr) {
  this.$addBinding(attr.value, function(value) {
  	if (value) {
      node.setAttribute('data-bs-content', value);
		}
  });
});

document.addEventListener('DOMContentLoaded', function(event) {
  return new bootstrap.Popover(document.body, {
    selector: '[popover-title], [data-bs-content]',
    placement: function(node) {
      var pexpression = node.getAttribute('dmx-bs-placement') || '';
      return dmx.parse(pexpression) || node.getAttribute('data-bs-placement') || 'auto';
    },
    title: function() {
      return this.getAttribute('popover-title') || this.getAttribute('title') || '';
    },
    content: function() {
      var expression = this.getAttribute('dmx-bs-popover') || '';
      return dmx.parse(expression) || this.getAttribute('data-bs-content') || '';
    }
  });
});

BS4 code is the same as BS, it uses jQuery there while the BS5 code has no jQuery. I changed the placement default in BS5, in BS4 this is the bootstrap default (top).

bpj · February 16, 2021, 11:24am

That’s looking good now. Thanks Patrick
There’s no option in the UI for tooltips for ‘auto’ placement can it be added to the dropdown at some point?

bpj · February 16, 2021, 12:13pm

Sorry Patrick, I just noticed something else…
The data-trigger attribute isn’t working on popovers. It is set as data-trigger="hover" in the UI/code view and appears correctly in the rendered HTML but the popover is still only triggered on click.

patrick · February 16, 2021, 12:21pm

In bootstrap 5 the data attributes changed, the are now all prefixed, it should be data-bs-trigger="hover".

bpj · February 16, 2021, 12:24pm

Ah, ok.
I’m using BS4 though but my project had the BS5 js inserted when adding popovers/tooltips - the Wappler UI is only adding data-trigger. What if the UI was set to add both data-trigger and data-bs-trigger to cover both frameworks?

patrick · February 16, 2021, 12:31pm

You shouldn’t combine them, Wappler tries to detect the used Framework on the page and inserts the correct attributes depending on the detected framework. In your case it probably detects the Bootstrap 4.

bpj · February 16, 2021, 12:38pm

So I have never chosen to add BS5 yet the tooltip and popover files were added to my BS4 page (in addition to the BS4 ones). The Wappler UI has added the data-trigger attribute which now needs to be data-bs-trigger
Should the BS5 js files not have been added?
or
Should the data attributes add differently?

Either way it seems like a bit of a bug.