Tooltip not appearing with Bootstrap theme

[keiserjb]

I'm using a subtheme of Bootstrap 5 lite. The tooltip on the calendar does not appear. When I change to Basis or Bartik it does.

[indigoxela]

I'm using a subtheme of Bootstrap 5 lite. The tooltip on the calendar does not appear.

Oh, that rings a bell (Bootstrap ships with its own tooltips, so they conflict). Strange, no existing issue for that... have to search in Zulip.

[indigoxela]

Ah, right, in Zulip: https://backdrop.zulipchat.com/#narrow/stream/218635-Backdrop/topic/Fullcalendar.20Views.20NG.20.2B.20Bootstrap

It's not a conflict, but a problem of order. Should actually get fixed in Bootstrap lite (IMO), but you can also fix it in your theme.

[indigoxela]

This is the solution we came up with:

function YOUR_SUBTHEME_NAME_js_alter(&$js) {
  $cdn_version = theme_get_setting('bootstrap_lite_cdn');
  if ($cdn_version) {
    if ($cdn_version == 'module') {
      // Use bundled library
      $js_src = '/' . backdrop_get_path('theme', 'bootstrap_lite') . '/bootstrap/js/bootstrap.min.js';
    }
    else {
      // Use CDN
      $js_src = 'https://stackpath.bootstrapcdn.com/bootstrap/' .$cdn_version  . '/js/bootstrap.min.js';
    }
    $js[$js_src] = array(
      'data' => $js_src,
      'type' => 'external',
      'every_page' => TRUE,
      'every_page_weight' => -1,
      'group' => JS_LIBRARY, // < the trick :)
    ) + backdrop_js_defaults();
  }
}

This code should go to your theme's template.php file.

[keiserjb]

Forgot to check Zulip. Wasn't using the module when that thread happened, but now it is here too.

[indigoxela]

but now it is here too.

Yes, absolutely makes sense. I didn't remember that we only discussed it in the chat.

[keiserjb]

I'm using Bootstrap 5 lite though, not Bootstrap lite.

[indigoxela]

I'm using Bootstrap 5 lite though, not Bootstrap lite.

I suspect, in this case it doesn't make any difference. But, sure, let's stay precise. Except for the library paths, of course.

Are you able to adapt the paths?

[indigoxela]

Here's the original code with the same adaption that might work for Bootstrap lite 5 (caution, didn't test):

function YOURTHEME_js_alter(&$js) {
  if (theme_get_setting('bootstrap5_lite_cdn')) {
    $cdn = 'https://cdn.jsdelivr.net/npm/bootstrap@' . theme_get_setting('bootstrap5_lite_cdn')  . '/dist/js/bootstrap.min.js';
    $js[$cdn] = backdrop_js_defaults();
    $js[$cdn]['data'] = $cdn;
    $js[$cdn]['type'] = 'external';
    $js[$cdn]['every_page'] = TRUE;
    $js[$cdn]['every_page_weight'] = -1;
    $js[$cdn]['group'] = JS_LIBRARY; // < the trick :)
  }
}

Update: this may not be necessary at all.

[keiserjb]

Works great with Bootstrap lite but the Bootstrap 5 is still a problem. Seems like I always run into these things when trying to use a Bootstrap theme.

[indigoxela]

Hm... I just installed Bootstrap lite 5, added tooltips to the view - and it works out of the box for me. Without any changes to the theme. Didn't create a subtheme, though.

@keiserjb can you give some more info about your Bootstrap settings and subtheme?

[keiserjb]

Yes, I am seeing this too with a demo site on backdropcms.org. But it still doesn't work on the other site. I've uninstalled the subtheme and now I'm just trying Bootstrap 5. Something else must be causing this to not work.

[indigoxela]

I am seeing this too with a demo site on backdropcms.org. But it still doesn't work on the other site.

Is there any nagging in your browser console? Experiments with js aggregation off and on?

If it works with Basis or Bartik, it's probably not a module causing this. What js or custom css does your subtheme ship with?

[keiserjb]

Not seeing anything, but digging further it appears to work when I use post date or updated date but not when I use a date field I've added to the content type.

[indigoxela]

it appears to work when I use post date or updated date but not when I use a date field

That's odd... Is it a multi-value date field? Is it required or optional? What are the date field settings? And the field settings in the view?

[keiserjb]

Yes, this is weird. I've tried the field both as optional and required. I've tried it with different formats. I am collecting a start and end date but that doesn't seem to make much difference either.

[indigoxela]

So let's try to narrow down possible causes.

• If you switch the theme to Basis tooltips work? (You wrote that above)
• With other date stuff (node created) tooltips work - even in your subtheme -- with the very same view?

Honestly, I don't see any obvious reason for that and can't reproduce it either. The culprit might be some js in your subtheme.

[keiserjb]

I know, this is tough. I’m just going to go without the tooltip. Nobody will know it’s missing but me.

The problem happens even when I select Bootstrap 5 as my default theme, not just my subtheme. But like you say I haven’t been able to reproduce it on another site. Maybe one day I will figure it out.

From: indigoxela Sent: Wednesday, April 27, 2022 3:23 AM To: backdrop-contrib/fullcalendar_views Cc: Justin Keiser; Mention Subject: Re: [backdrop-contrib/fullcalendar_views] Tooltip not appearing with Bootstrap theme (Issue #16)

So let's try to narrow down possible causes. • If you switch the theme to Basis tooltips work? (You wrote that above) • With other date stuff (node created) tooltips work - even in your subtheme -- with the very same view? Honestly, I don't see any obvious reason for that and can't reproduce it either. The culprit might be some js in your subtheme. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[indigoxela]

The problem happens even when I select Bootstrap 5 as my default theme, not just my subtheme.

That's weird... Then it's maybe something in your view?

If you take a pause from that problem, then maybe you find the reason (in a few days). By accident or because of a different perspective. :wink:

[indigoxela]

Seems like it's time to close this issue. Nobody else confirmed it so far and there are no steps to reproduce.

Feel free to reopen, if there are additional infos.

[yorkshire-pudding]

I'm getting this on a subtheme of Tatsu (looks like Tatsu includes bootstrap which has some custom stuff for tooltips in CSS and JS) - not done any custom JS. If I manually edit the HTML in "inspect element" to add the tooltip to the title attribute, then it shows up as a browser function. If I switch to basis it appears as a styled tooltip.

Is it feasible to add the tooltip into the title attribute also as a fallback for if there is something preventing in the theme? It appears to work adding it in for me, but without some form of switch, I doubt it would be acceptable as those who have a theme that doesn't hide it would get two tooltips. This is what I added into js/fullcalendar_views.js on line 29:

arg.el.setAttribute('title', arg.event.extendedProps.tooltip);

What does work in my sub theme is a slightly modified version of the fix you have above. I added the following into template.php of my subtheme and it worked (I got the styled tooltips):

function tatsu_sbc_js_alter(&$js) {
    $cdn = backdrop_get_path('theme', 'tatsu') . '/js/bootstrap.bundle.min.js';
    $js[$cdn] = backdrop_js_defaults();
    $js[$cdn]['data'] = $cdn;
    $js[$cdn]['type'] = 'external';
    $js[$cdn]['every_page'] = TRUE;
    $js[$cdn]['every_page_weight'] = -1;
    $js[$cdn]['group'] = JS_LIBRARY; // < the trick :)
}

[robertgarrigos]

Just to add my 5 cents, as I'm having this same issue: I'm using the same template with two different sites and one is showing the tooltips, but not the other. It has to be some incompatibility outside the template. Looking into it, still.

[indigoxela]

It has to be some incompatibility outside the template. Looking into it, still.

The theme's usually the first candidate to look at. Fullcalendar Views NG has no customizable templates on its own, just plain views rendering.

[robertgarrigos]

But if I'm using the exact theme on both sites, Fullcalendar's tooltip only working on one of them, it cannot be the theme, but something else outside of it, maybe not even Fullcalendar, which triggers the issue. Am I right? Does it have sense?

[yorkshire-pudding]

@robertgarrigos Anything in console log?

[robertgarrigos]

Nothing in console log, @yorkshire-pudding. I'm looking at the js files called for each of those sites and there are some differences. Some are obvious, because of different modules enabled, but there is one file missing in the non-working site which I don't understand: jquery-extend-3.4.0.

[robertgarrigos]

Found it: it is the jQuery version setting on admin/config/development/jquery. The tooltip is only shown when JQuery is set to 1 (legacy). When set to version 3 (recommended) the tooltip disappears.

It seems that the order issue you can fix with JQuery v.1 it's not working with JQuery 3... trying to find out a solution. This is just a workaround.

But there is a way to use tooltips with bootstrap 5 compatible with JQuery 3: https://www.geeksforgeeks.org/how-to-create-a-bootstrap-tooltip-using-jquery/

Could this be applied to fullcalendar_views??

[robertgarrigos]

But even with jQuery set to 1.x, the tooltips disappear when switching months views.

[indigoxela]

Found it: it is the jQuery version setting on admin/config/development/jquery

Can not reproduce. For me the tooltips work just fine with both, jQuery 1 AND jQuery 3.

My suspicion is, that something else (module or theme) breaks tooltips, but unrelated to fullcalendar_views itself. By figuring out, that it has to do with jQuery compatibility, you're getting closer to solve your problem.

But I'd like to clarify: fullcalendar_views is compatible with both jQuery versions.

[robertgarrigos]

Thanks, @indigoxela. I'll try to find out...