Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Popup balloon

  1. #1
    New Coder
    Join Date
    Dec 2013
    Posts
    22
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Popup balloon

    Hello,I want to create a mouse over balloon popup like the one above:

    But i have no knowledge in javascript and I can't get it done.
    I want when I go with my mouse over the blue image,the popup to appear and I want to be able to modify the text in the popup,the popup must resize itself depending of the text.
    Thank you for taking your time reading this and maybe solving it.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,540
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Why JavaScript?

    Code:
    <img src="balloon2.jpg" title="1-800-433-8321" />
    Won't that do what you want??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Bitzu (01-04-2014)

  • #3
    New Coder
    Join Date
    Dec 2013
    Posts
    22
    Thanks
    22
    Thanked 0 Times in 0 Posts
    Well,I want to add a "skin" to that title,that title just popups a square with text inside i want a chat balloon,that chat balloon from the image.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Still, JS is not necessary; can all be done with CSS, even with animation in modern browsers. A simple example, not tested:
    Code:
    <div class="contact">
      … location icon …
      <span><img [phone icon] /> <span>1-800-433-8321</span></span>
      … e-mail link …
    </div>
    Code:
    .contact span {
      display: inline-block;
      position: relative;
    }
    .contact span span {
      position: absolute;
      top: -30px;
      left: 25%;
      padding: 10px;
      line-height: 1;
      color: #666;
      box-shadow: 0 1px 1px rgba(0,0,0,.3);
      border-radius: 4px;
      display: none;
    }
    .contact span span:hover {display: block;}
    .contact span span:before {
      position: absolute;
      bottom: -5px;
      left: 50%;
      margin-left: -5px;
      border-width: 5px 5px 0;
      border-style: solid;
      border-color: white transparent;
    }
    That’s really pretty basic and needs more refinement but I don’t have the time right now and just wanted to demonstrate what’s possible.

  • Users who have thanked VIPStephan for this post:

    Bitzu (01-06-2014)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •