SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Tooltip - Copy and paste bug?

    Hi there,

    I have a :hover tooltop which works using a hidden <span> that contains the tooltip text. It works fine.

    My problem is that when you copy and paste the text it coppies the content of the hidden <span> containing the tooltip with it. Any ideas how i can stop this happening?

    Even better, can anyone recommend a tooltip that takes the text out of the <title> tag as this would be a lot more semantic?

    Thanks,

    Jonno.

  2. #2
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jonno,
    I'm afraid your best bet is to delve into the realms of Dom Scripting here. If you assign a mouseover event to your title that creates a tooltip div that is absolutely positioned next to the title, but positioned elsewhere within the document, then it will not be selected when someone copies and pastes the title. Try the Yahoo User Interface http://developer.yahoo.com/yui/ for a litlle lift.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Even better, can anyone recommend a tooltip that takes the text out of the <title> tag as this would be a lot more semantic?
    Isn't that what the title attribute does anyway. It displays a tooltip with its contents.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Even better, can anyone recommend a tooltip that takes the text out of the <title>
    Very rough and ready (ask someone in the js forum to do it properly )


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <!--[if lt IE 7 ]>
    <script type="text/javascript">
    sfHover = function() {
        var sfEls = document.getElementById("outer").getElementsByTagName("p");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    <script type="text/javascript">
    function getvalue(el,txt) {
    theTxt = el.getAttribute("title");
    theNewTxt = document.getElementById(txt);
    theNewTxt.innerHTML= theTxt;    
    }
    </script>
    <style type="text/css">
    p {
        margin:0;
        padding-bottom:10px;
        position:relative;
    }
    h1{text-align:center}
    
    p span    {
        border:1px solid red;
        background:#ffffcc;
        width:150px;
        position:absolute;
        left:-999em;
        top:25px;
        text-align:center;
        color:#000;
    }
    p:hover span,
    p.over span{
    left:auto;
    top:-2em;    
    margin-left:10px;
    }
    
    </style>
    </head>
    <body>
    <h1>Testing</h1>
    <div id="outer">
        <p><span id="thetext1"></span><em title="this is the first tooltip" onmouseover="getvalue(this,'thetext1');return false;" >This is just some text for testing.</em> </p>
        <p ><span id="thetext2"></span><em title="this is the second tooltip" onmouseover="getvalue(this,'thetext2');return false;">This is just some more text for testing.</em> </p>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

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