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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to hide yellow hover box ~ title=""

    I copied this code from somewhere online and changed a few things, and I'm quite pleased with it, except that I can not find any way to keep that yellow box from popping up when you hover over the image.. Help?!?

    Code:
    <style script="html/css">
    .thumbs {
      float: left;
      width: 110px;
      margin: 2px;
      text-align: center;
      position: relative;
    }
    .thumbs a {
      color: #900;
      text-decoration: none;
    }
    .thumbs a:hover {
      color: red;
      position: relative;
    }
    .thumbs a[title]:hover:after {
      content: attr(title);
      padding: 4px 6px;
      color: #000;
      position: absolute;
      left: 0;
      top: -16px;
      width: 100px;
      white-space: nowrap;
      background-color: #ffffff;
      filter: alpha(opacity=80);
      opacity: 0.8;
    }
    </style>
    Code:
    <div class="thumbs">
    <a href="" title="Title"><img src="" width="100" height="65"/></a>
    </div>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Add title="" to the <img> tag so that IE doesn't populate it with the content of the alt attribute (which IE does if you don't give the image a title).

    For everywhere apart from images you can get rid of the tooltio popup (assuming the browser uses that rather than the status bar) simply by removing the title attribute from the HTML.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    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
    •