How to install? and popover with overflow:hidden?

[luispuerto]

hey!

I'm trying to install littlefoot in a Jekyll site with the minimal mistakes template but I'm not able to, and I really don't know what I'm missing.

I'm trying to install in a manual mode... moving littlefoot.min.js to the js folder and also the scss as minimal mistakes explains in the above link. I'm sure I'm missing something.

I wanted to migrate from bigfootjs to this, mainly because seem that bigfootjs doesn't show up correctly when it's inside of a section of a web with overflow: hidden in the css.

Has littlefoot overcome this problem in some way?

[goblindegook]

Have you tried setting the styles for the tooltip to position: absolute? You may need to wrap it in a container with position: relative.

[goblindegook]

As for integrating with Jekyll, can you be more specific about which errors you're getting? Bear in mind that moving files is not enough, you'll need to call the littlefoot() (or littlefoot.default()) function somewhere once the document has finished loading.

[luispuerto]

Have you tried setting the styles for the tooltip to position: absolute? You may need to wrap it in a container with position: relative.

The tooltip has a position: relative and it has a wrapper with a position: absolute.

The problem here is related to this.

• https://stackoverflow.com/questions/710158/why-do-my-list-item-bullets-overlap-floating-elements
• https://stackoverflow.com/questions/16041229/css-overflowhidden-with-floats

In a few words, when you have a list of items and you have to have an object —typically an image— floating in the left, the bullets or numbers of the list are or over the object or really touching it, which it's really ugly and lost the sense of the list. So to fix this you have to set overflow:hidden on the list.

That makes the bubble to get buried...

I think that solution could be something similar to this, but I don't know enough JS.

I was wondering if this behavior also happen with littlefoot.

can you be more specific about which errors you're getting? Bear in mind that moving files is not enough, you'll need to call the littlefoot() (or littlefoot.default()) function somewhere once the document has finished loading.

I don't get any error... it is just not working.

• littlefoot.min.js is at assets/js/plugins/littlefoot.min.js
• _littlefoot-button.scss, _littlefoot-content.scss, _littlefoot-mixins.scss, _littlefoot-variables.scss and littlefoot.scss are located in _sass/minimal-mistakes/vendor/littlefoot. and I import littlefoot.scss in the main scss of the template @import "minimal-mistakes/vendor/littlefoot/littlefoot";.
• at the package.json at the

"scripts": {
    "uglify": "uglifyjs assets/js/plugins/littlefoot.min.js assets/js/_main.js -c -m -o assets/js/main.min.js",
...

• at the _main.js I set

  var littlefoot = require('littlefoot').default

  littlefoot()

• and I build main.min.js with npm run build:js.

What am I missing?

[luispuerto]

Just in case I've also set at header and footer:

<script type="text/javascript">
  var littlefoot = require('littlefoot').default

  littlefoot()
</script>

[goblindegook]

For the first problem, I haven't yet tested littlefoot for that use case, I'll give it a shot later this week. It's possible it will have the same issues as Bigfoot as the CSS was adapted from that project, and I doubt there's anything in the JavaScript right now capable of fixing an issue introduced by styles.

As for setup, I don't see anything obviously incorrect with the examples you provided, it would be helpful to diagnose a fully configured repository. Anyone familiar with Jekyll care to chip in?

[luispuerto]

I solved it with display: table in the css on the ul ol. I have to tweak it a little bit more, but now it's working.