Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Fullscreen Tipped for mobile?

Hi there,

Firstly, I just wanted to say thanks for building such a fantastic tool.

I was wondering if there was a simple way of getting a TIpped to appear full screen when it is opened?
Currently, when I use Tipped on iOS I get a small popup that isn't able to scroll and it's just sort of there. In Android, scrolling works but it still just appears small. Is it possible to make a Tipped fullscreen when it appears?

Thanks,
Simon

Comments

  • edited September 2015
    Tooltips don't have a fullscreen mode. They'll never stretch up beyond what you insert into them. They will stay within screen width, so if you insert text into them it shouldn't overflow horizontally. With a large amount of text it'll only overflow vertically, but that's something you can scroll to in the browser.

    If your website is responsive and resizes for mobile tooltips shouldn't appear small on it. The tipped website is an example of that.

    Avoid inserting content with a fixed width, or add media queries to resize the content on mobile to make sure tooltips stay responsive.
  • edited September 2015
    Thanks for the insight. Would it be possible to make a fullscreen version using CSS media queries? As an exmaple, here is my site that I'm trying to get mobile responsive ### As you can see it doesn't look quite right...
  • edited September 2015
    Not really, you'll always have vertical overflow, unless you set a fixed height. But you're already doing that with an iframe.

    First your page will have to be responsive, right now it has a fixed width. You can do that for desktops but you should also use max-width: 100% so it works on mobile, you can use media queries to tweak the width for specific screen widths. The iframe you insert should also have max-width: 100% and maybe even a min-width.

    Use the maxWidth option on the tooltip to restrict the width of the tooltip to something that works well on the desktop. If the content of the tooltip is responsive, it'll automatically resize to work on mobile.

    All of that will still get you a tooltip, I think you might be looking for a modal window instead.
Sign In or Register to comment.