Comments (11)
I understand the problem. I think I need to add the iframe viewport offset into the position calculation for the popover and background.
I'll work on that add upload a fix to the repo when I have it done.
from bootstrap-tourist.
@IGreatlyDislikeJavascript if you think the issue is with Popper.js please may you open an issue in its repository so I can take a look?
Thanks!
from bootstrap-tourist.
You're returning the DOM element, and not the element selector.
$("#myIframe").contents().find("body")
If you run this in the console you'll see that it returns the HTML element.
The element
option for a step
is expecting a string: something like:
steps: [
{
element: "#myIframe"
}
]
from bootstrap-tourist.
@thenewbeat - Tourist adds support for finding element dynamically by function :-)
@saviemedia - interesting problem, I wonder if there's an issue with the jq object identification. In short, original Tour passes the element string literal around, and I had to make a bunch of changes to allow seamless switch between string literal and function for element.
Are you using bs3 or bs4?
Please can you try creating a tour with a single step that directly returns a DOM element from a function, without using $.find etc? This will let me narrow down whether the problem is the jq code (can't find the element etc), or in Tourist.
In other words, please do this:
In your html:
<button id="btnTest" .........>test</button>
In your javascript to set up the tour steps, have just one step that returns the object directly:
steps:
[
{
element: function() { return $("#btnTest"); },
title: "test",
content: "test content",
}
]
And in your tour options, please turn on debug for console messages:
var Tour=new Tour({ debug: true, ....other options here... });
This will let us narrow down the problem. Thanks!
from bootstrap-tourist.
Thanks for your quick answer! I tried what you suggested to me:
steps:
[{
//element: "#selectMatter",
element: function() { return $("#selectMatter"); },
title: "Help",
content: "This is a test.",
}]
When the element is in static mode, it works. When in dynamic mode, I can see the backdrop appearing, but the tooltip won't appear since I get this error:
[ Bootstrap Tour: 'Test' ] Using framework template: bootstrap4
bootstrap-tourist.js:1598 [ Bootstrap Tour: 'Test' ] Extending Bootstrap sanitize options
bootstrap-tourist.js:1598 [ Bootstrap Tour: 'Test' ] Scroll into view. ScrollTop: 0. Element offset: 279. Window height: 757.
util.js:137 Uncaught Error: TOOLTIP: Option "selector" provided type "element" but expected type "(string|boolean)".
at Object.typeCheckConfig (util.js:137)
at i.t._getConfig (tooltip.js:632)
at i (tooltip.js:129)
at new i (popover.js:11)
at HTMLSelectElement. (popover.js:158)
at Function.each (jquery-3.3.1.min.js:2)
at w.fn.init.each (jquery-3.3.1.min.js:2)
at w.fn.init.i._jQueryInterface [as popover] (popover.js:149)
at Tour._showPopover (bootstrap-tourist.js:1837)
at Tour._showPopoverAndOverlay (bootstrap-tourist.js:1703)
Thanks!
from bootstrap-tourist.
I am really beginning to hate popper.js!
Ok this was my mistake and I'm not sure how I missed it. Please do this to solve it.
On line 1836 of bootstrap-tourist.js, find the following code:
if(this._options.framework` == "bootstrap4"..... // if clause finishes on line 1835
$element.popover(popOpts); // this is currently line 1837
In between these 2 lines, on line 1836, make the following change to add the if clause:
if(this._options.framework` == "bootstrap4".....
}
// original clause finishes on line 1835
// ** ADD THIS if() ***
if(this._options.framework == "bootstrap4" && isOrphan == false)
{
popOpts.selector = "#" + step.element[0].id;
}
// END ADDITION
// original code continues, this was line 1837
$element.popover(popOpts);
Please test that for me, it should work. I'll add the fix into the repo if so.
from bootstrap-tourist.
Yes it works now with the example mentionned above! Great thanks!
I'm still wondering how to select an element inside a iFrame.
Example:
steps:
[{
//element: "#MyElemInIFrame", // Doesn't work.
//element: function() { return $("#MyElemInIFrame"); }, // Doesn't work.
element: function() { return $("#MyIFrame").contents().find("#MyElemInIFrame"); }, // Doesn't work.
title: "Help",
content: "This is a test.",
}]
Logs:
[ Bootstrap Tour: 'ContenuOutil' ] Skip the orphan step 1.
Orphan option is false and the element [object Object] does not exist or is hidden.
from bootstrap-tourist.
Here is some progress...
I was able to make this work:
steps:
[{
element: function() { return $("#MyIFrame").contents().find("#MyElemInIFrame"); },
title: "Help",
content: "This is a test.",
}]
I had to create the tour inside that function:
The remaining problem is that the tour popup snap to the relative position of the element in the iframe. So, if the element is at the top in the iframe, the popup will appear at the top of the page. Do you know how take into consideration the absolute position of the element and not the relative position of the element in the iframe? I don't know if I'm clear...
Great thanks in advance! 👍
from bootstrap-tourist.
@saviemedia I've updated the repo with a fix for the element: function() issue. I'm still working on the iframe issue.
@FezVrasta I've dug into this further. The issue isn't directly with popper.js, it's with the BS4 implementation of popper.js.
The popover options passed to Bootstrap are reconstructed internally into a new object before Bootstrap passes them to popper.js. Only a couple of popper.js options are actually transferred into the new object which is subsequently passed to popper.js. That means that many of the popper.js features are actually inaccessible when using BS4.
I thought the issue was that popper.js was ignoring the options I passed to it. The root cause is that those options were never passed to popper.js because of BS4.
However I'll consider opening an issue in your repo to enable an orphan/stick-to-viewport-center option in popper.js, which would be very useful.
Thank you.
from bootstrap-tourist.
@saviemedia sorry for the delay on this, I've been frustratedly scratching my head over how to solve it.
The short version is, it's not easily solvable in BS4. Popper.js doesn't obey iframes, and BS4 uses popper.js without exposing it fully, so I currently think it's only possible to solve this if @FezVrasta fixes popover iframe element alignment, in popper.js.
I've opened a report in the popper repo (floating-ui/floating-ui#791 (comment)) so we'll need to wait for FezVrasta to take a look.
Once we have a solution from FezVrasta, I'll need to rework some of the positioning code in Tourist as well.
from bootstrap-tourist.
Great thanks for your proactivity. Please keep us posted if any changes. Thanks in advance to @FezVrasta as well. Very best!
from bootstrap-tourist.
Related Issues (20)
- Tour initialization flashes / visible backdrop
- Backdrop covers only the viewport and can be scrolled away HOT 12
- Offset calculation of highlighted element is wrong sometimes HOT 3
- reflexOnly: true allow proceed if using keyboard arrows HOT 3
- Element not clickable when its ancestor has a position fixed and z-index lower than the tour-backdrop which is sibling HOT 2
- [Feature request] Add highlight padding option HOT 2
- [Feature request] Ability to highlight multiple elements at once HOT 1
- incorrect isOrphan Step detection under certain conditions HOT 6
- Misplaced tour if target element has overflow:auto CSS HOT 2
- Angular HOT 4
- On the last step in the tour the next button is disabled, but can still be clicked HOT 5
- backdropPadding HOT 1
- FYI: FIXING ISSUES DURING PANDEMIC HOT 3
- Issue with pause-resume buttons HOT 1
- Next button partially working at the end of the tour. HOT 2
- Bootstrap 4.5 compatibility? HOT 1
- $(...).stop is not a function? HOT 1
- Cannot highlight elements with the style display: contents and incorrect highlight position with fixed elements HOT 1
- IGreatlyDislikeJavascript
- Bootstrap 5 support HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-tourist.