What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

  • Profile Image

    Hover Text Customization: Arrow Realignment

    Asked by E6 on August 01, 2011 at 12:55 PM

    Here's a weird one for you.

    Can I customize the hover bubble to move the < (carat part of bubble)?

    I've got a form where someone wants me to put a lot of info (probably too much, but whatcha gonna do?) in the hover text.

    I can set my width settings and such so that it will work ok, but to make it work I have tweaked the layout so that the bubble is underneath the pulldown instead of to the side. It works and looks fine except that the carat part of the bubble now looks goofy. If the carat could be on top and centered so it's pointing up it would be perfect.

    It's kind of a weird question so I hope the request makes sense?

    thanks!

    layout settings hover text hover text arrow hover text caret arrow caret
  • Profile Image
    JotForm Support

    Answered by abajan on August 01, 2011 at 02:36 PM

    Hi E6

    Your question makes perfect sense. As a matter of fact, I recently had to re-position that arrow (caret) on a few fields for another user. Actually, that arrow can be postitioned anywhere on the perimeter of the bubble, except for the corners. The reason it cannot be put on the corners is that it cannot be made to point diagonally (at least, to the best of my knowledge).

    I've looked at your form. Adding the following CSS to what you have already injected should do the trick:

    .form-description-arrow {
    border-color:transparent transparent #CCC transparent;
    left:62px;
    top:-24px;
    }
    .form-description-arrow-small {
    border-color:transparent transparent #F5F5F5 transparent;
    left:65px;
    top:-14px;
    }

    You will also need to move the hover text down a bit by increasing the value of the top property in the .form-description rule by 7 pixels:

    .form-description {
    max-width: 200px !important;
    top:57px;
    left:10px !important;
    }

    Please let us know if this solution suits your requirements and if there's anything else related to your form(s) with which you require assistance.


    ~ Wayne

  • Profile Image
    JotForm Support

    Answered by NeilVicente on August 01, 2011 at 02:40 PM

    Hi,

    Please disregard my previous message, as Wayne's solution works perfectly. Guess I didn't know much about arrows :)


    Neil

  • Profile Image

    Answered by E6 on August 01, 2011 at 04:11 PM

    Wayne to the rescue again! That's very cool.

    Very glad I found JotForm. The form controls and features are impressive, but the friendly, fast, expert help in learning how to use them really makes you guys stand out.

  • Profile Image
    JotForm Support

    Answered by NeilVicente on August 01, 2011 at 04:23 PM

    Nice to know that you find the support we provide satisfactory. I should say though, when it comes to CSS, Wayne's the man!

  • Profile Image
    JotForm Support

    Answered by abajan on August 01, 2011 at 08:07 PM

    Well, I don't know if I would necessarily go that far, Neil. LOL For instance, just the other day I was trying my upmost to figure out something to which our colleague Albert (brx250) supplied a solution that was simply elegant:

    http://www.jotform.com/answers/35565-CSS-Jotform-Hebrew-form-Checkbox-RTL-and-more

    Nevertheless, thanks for the compliment.

    Glad you're happy with the the arrow's new position, E6.

    Cheers.