ansaurus

Question

Answer 1

A:

There's a better way if you want to display nice tooltips - the tooltip plugin

You could always append content to the DOM and then remove on hover out, that does work. I think it depends on what you're planning on displaying, if it's images then I'd be tempted to hide them on page load and then show on hover but if it's just a block of text then I'd probably be tempted in appending to the DOM and then removing on hover out.

Another aspect to consider is graceful degradation - would you want some/similar functionality to be available if JavaScript is disabled or none?

If you inspect Facebook with Firefox's Firebug plugin, you can see that the hide div is there when the page is loaded, but is hidden and activated through CSS classes.

Russ Cam 2009-05-14 21:32:38

Reasons for negative votes always welcome...

Russ Cam 2009-05-14 21:39:55

Answer 2

+2 A:

The speediest solution would be to have a hidden block with the button/drag handle and whenever you mouse-over your element you .show() that div and position it accordingly (with css)

.append()'ing and removing html code on each mouse-over is certainly possible but will most definitely have some performance hit.

duckyflip 2009-05-14 21:39:52

Answer 3

+1 A:

Having done something like this recently, here is an extended example, if you want to test it you will need to grab jquery, jquery ui and my reset.css. See the linked screenshot here. On hover, the background and border are changed and the previously hidden icons are shown.

   <html>
    <head>
     <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
     <link rel="stylesheet" href="css/smoothness/jquery-ui.css" type="text/css" media="screen" />

     <style type="text/css">
      body {
       font-family: sans-serif;
       font-size: 13px;
      }

      p {
       font-size: 1em;
       line-height: 1.5em;
       margin-bottom: 15px;
      }     
      #items .item .buttons {
       width: 16px;
       display: none;
       float: right;
       background: transparant;
      }

      #items .item .buttons li {
       height: 16px;
       width: 16px;
       margin: 1px 1px 0px 0px;
       float:right;
       cursor: pointer;
      }   

      #items .item {
       width: 400px;
       margin: 10px;
       border: 1px dotted #fff;
      }

      #items .hover {
       background: #ffe;
       border: 1px dotted #ccc;
      }

      #items .item .contents {
       margin: 20px 10px 10px 10px;
      } 
     </style>

     <script src="js/jquery.js" type="text/javascript"></script>
     <script src="js/jquery-ui.js" type="text/javascript"></script>

     <script type="text/javascript">
      $(function() {
       $('#items .item').hover(
        function() {
         $(this).addClass('hover');
         $(this).find('.buttons').show();
        },
        function() {
         $(this).removeClass('hover');
         $(this).find('.buttons').hide();
        }
       );

       $('#items .item .buttons li').hover(
        function() {
         $(this).addClass('ui-state-hover');
        },
        function() {
         $(this).removeClass('ui-state-hover');
        }
       );
      });
     </script>

     <link
    </head>
    <body>
     <div id="items">
      <div class="item">
       <ul class="buttons">
         <li class="delete ui-state-default ui-corner-all">
           <span class="ui-icon ui-icon-close"/>
         </li>
         <li class="config ui-state-default ui-corner-all">
           <span class="ui-icon ui-icon-wrench"/>
         </li>
         <li class="info ui-state-default ui-corner-all">
           <span class="ui-icon ui-icon-info"/>
         </li>
       </ul>
       <div class='contents'>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet arcu ante. Suspendisse potenti. Praesent vel nisl urna, eu ultricies risus.</p> 
        <p>Nulla eget mauris ac lectus tempor consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et lacus ipsum.</p> 
        <p>Donec rhoncus tincidunt magna, sit amet placerat nulla fringilla iaculis.</p>
       </div>
      </div>

      <div class="item">
       <ul class="buttons">
         <li class="delete ui-state-default ui-corner-all">
           <span class="ui-icon ui-icon-close"/>
         </li>
         <li class="config ui-state-default ui-corner-all">
           <span class="ui-icon ui-icon-wrench"/>
         </li>
         <li class="info ui-state-default ui-corner-all">
           <span class="ui-icon ui-icon-info"/>
         </li>
       </ul>
       <div class='contents'>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet arcu ante. Suspendisse potenti. Praesent vel nisl urna, eu ultricies risus.</p> 
        <p>Nulla eget mauris ac lectus tempor consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et lacus ipsum.</p> 
        <p>Donec rhoncus tincidunt magna, sit amet placerat nulla fringilla iaculis.</p>
       </div>
      </div>
     </div>
    </body>
   </html>

antz29 2009-05-14 23:27:18

thx antz.. Thank you for the example. Actually you described my problem better than me rather then the answer I was expecting :) I see that you have the buttons for each of the record you have.. i.e. you have <ul class="buttons"> before each div-contents.. What I was wandedring is whether this <ul class="buttons" exists somewhere on the page floating and whenever I move my mouse over one of the div-contents it is positioned there automatically and set to visible or I go your way and for each record, I have a seperate div and just show/hide

Emin 2009-05-15 04:24:38

Hi Emin,In this example, I create a separate set of buttons for each item. But you could create one (outside of the items) and absolute position them. Then, your hover function would set the top and left positions using the the offset of the target item. The complicated(ish) bit it to set a variable with the currently hovered item so that the functions attached to the click event of each button know what item to act on. In some ways, it is far simpler to do it the first way, and I doubt there would be any major performance hit unless you were displaying many, many items at once.

antz29 2009-05-15 07:39:46

ansaurus

tags:

views:

answers:

display icons (or content) on mouseover

related questions