XF 2.3 Tooltips CSS Conflict?

I

ItsAConspiracy

New member
I have almost gotten my site 100% sorted but running into an issue with tooltips. So, obviously Xenforo is using bootstrap components like tooltips natively. I am trying to use my own custom tooltips and there appears to be a conflict:

When I include the standard tooltips css like so:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">

My tooltips (that appear when hovering over ICODE tagged elements) will work the way they are supposed to, but then the xenforo tooltips sort of work but disappear instantly.

Take a look: https://how2pi.com/index.php?threads/how-to-run-windows-98-via-86box-on-ubuntu-arm.13/

How can I solve this?? TIA!
 
Last edited:
Sort by date Sort by votes
I would not recommend to include the Bootstrap CSS framework into XF! There might be more conflicts.

AFAIK XenForo does not use Bootstrap in any way.

You should work with XF CSS and JS to achieve what you want.

Also, including Bootstrap adds a lot of unnecessary code (test your site speed with and without Bootstrap ;))
 
Upvote 0 Downvote
nocte said:
I would not recommend to include the Bootstrap CSS framework into XF! There might be more conflicts.

AFAIK XenForo does not use Bootstrap in any way.

You should work with XF CSS and JS to achieve what you want.

Also, including Bootstrap adds a lot of unnecessary code (test your site speed with and without Bootstrap ;))
Click to expand...

Thanks for the response. So I had assumed that popper.js required bootstrap, but now its obvious thats not the case. I removed BS and added in popper.min.js by itself. Now I have what looks like unstyled and mispositioned popups. Looks like crap but at least there are no CSS conflicts and the XF popups look and work great again. I guess I need to figure out the css for my custom popups, idk, Functionally its all the way it should be.
 
Upvote 0 Downvote
Jeremy P said:
XF does not use any parts of Bootstrap (or Popper.js) natively. Our tooltip system can be used like this:

HTML: 
<span data-xf-init="tooltip" title="A tooltip">Some text</span>
Click to expand...
Sorry for making stupid assumptions about how XF works. This is WAY easier than I had made it out to be! THANK YOU!

Probably just another stupid question, but how do I get the tooltip for each specific element to change to "Copied" after they are clicked? Updating the title like so: $(this).attr('title', 'Copied!'); does not update the tooltip.
 
Upvote 0 Downvote
We move the value to the data-original-title attribute to prevent browser tooltips from interfering (but still prefer using title to set the original value for graceful degradation). We also don't use jQuery natively in 2.3. You should be able to update it like this:

JavaScript: 
element.dataset.originalTitle = 'Copied!';
const tooltipHandler = XF.Element.getHandler(element, 'tooltip');
tooltipHandler.refresh();
 
Upvote 0 Downvote
Jeremy P said:
We move the value to the data-original-title attribute to prevent browser tooltips from interfering (but still prefer using title to set the original value for graceful degradation). We also don't use jQuery natively in 2.3. You should be able to update it like this:

JavaScript: 
element.dataset.originalTitle = 'Copied!';
const tooltipHandler = XF.Element.getHandler(element, 'tooltip');
tooltipHandler.refresh();
Click to expand...

Thanks for your help, Jeremy. I really appreciate it!
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom