I'm using a .vtt file to display chapters within the players progress bar. It's working fine, but for chapters with longer titles, it squishes the text together in the popover preview (see imgur link). I'm using the Bekle skin, and I've had a look through the skin CSS, but I can't find the variable used to set the width of the popover box.
I'd like to add a max-width rather than a set width. Is this possible?
http://i.imgur.com/6WvgNEH.png
You should be able to set the width property on the jw-time-tip, but the issue is that it will be applied to all of the tooltips, not just the ones with your chapter markers. It doesn’t look like max-width will work.
.jw-time-tip {
width: 150px !important;
}Thank you!
Thank you. This works but as you say it's applied to all tooltips.
I've noticed that the width of the time tip expands as you go past the 59:59 mark, so there must be a max-width value set somewhere that can be increased to better fit chapter titles?
Hi Adam,
I believe the element just makes itself wide enough to fit the 59:59. Since there are no spaces in 59:59, it treats it as one word. This is why the tooltips are always just the width of the longest word and then wrap the rest of the chapter title.
You’re more than welcome to take a look at the CSS of the player as everything should be customizable, but adjusting the CSS is not something we officially provide assistance with. I took a look yesterday for a little while and the best I could come up with is what I already shared.
Thank you.
I've found a solution.
It's wrapping on the spaces in the chapter title, so by adding:
.jw-time-tip {
white-space:nowrap;
}
it forces the title to stay on one line. And if the title is too long, you can add <br> line breaks to split it onto multiple lines.
That makes sense! Thanks for sharing!