Results 1 to 4 of 4

Thread: setting for tooltip

  1. #1
    Join Date
    Aug 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default setting for tooltip

    1) Script Title: Cool DHTML Tooltip

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tmltooltip.htm

    3) Describe problem:

    Hi to all!
    I'm a newbie of javascript, using this article http://www.dynamicdrive.com/dynamici...tmltooltip.htm
    I'm tring to set the js in this page
    http://www.italia-mobili.it/962-tavo...lungabile.html
    (above the dropdown, in the colored image)
    I want to set the position of tooltip like this page
    http://megashare.info/#Search,pretty%20little%20liars
    can someone help me?
    thanks!!!

    ciao,
    Matteo
    Last edited by james438; 08-31-2013 at 01:55 PM. Reason: format

  2. #2
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,692
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    Your page is in violation of Dynamic Drive's usage terms, which, states that the credit notice inside script must stay intact. Please reinstate the notice.


    Welcome to the forums. Someone should be able to help you soon.

    As for the above notice I can understand if you are trying to learn and understand some of the intricacies of one of Dynamic Drive's scripts, but you are still copying and pasting the script into your site and not giving any credit to dynamicdrive for the script you are using.
    Last edited by james438; 08-31-2013 at 05:37 PM.
    To choose the lesser of two evils is still to choose evil. My personal site

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,776
    Thanks
    2
    Thanked 412 Times in 407 Posts

    Default

    Code:
    var offsetxpoint=-60 //Customize x offset of tooltip
    var offsetypoint=20 //Customize y offset of tooltip
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Your source shows this:
    Code:
    <img class="logo" src="http://www.italia-mobili.it/themes/decodesign/img/logo.png" alt="Italia Mobili" />
    Replace it with something like this:
    Code:
    <img class="logo" style="cursor: pointer" src="http://www.italia-mobili.it/themes/decodesign/img/logo.png" alt="Italia Mobili" onMouseover="ddrivetip('<img src=\'http://www.italia-mobili.it/themes/decodesign/img/logo.png\' style=\'position: relative; width:200px; height:40px; float: left; margin-right:10px; \'><a style=\'font-family: arial; font-size: 12px; \'>Homo habilis has a smaller face and smaller teeth than Australopithecines or older hominin species. But it still retains some ape-like features, including long arms and a moderately-prognathic face. <br><br>Its name, which means `handy man`, was given in 1964 because this species was thought to represent the first stone-tool maker. Currently, the oldest stone tools are dated slightly older than the oldest evidence of the genus Homo. <br><br>Homo habilis was the earliest known species of the genus Homo until May 2010, when Homo gautengensis was proposed by Darren Curnoe, a species theorized to be even older than Homo habilis. <br><br>Cranial capacity varied between 500 and 800 cc (with an average of 650 cc), which is small, considering that habilis was about 127 cm tall and weighed about 45 kg. Internal markings on the skull indicate that his brain had a humanlike shape. A bulge in the area used for speech on the left side of the brain (Broca`s area), suggests that habilis may have been capable of rudimentary speech. He was also the first hominid to add meat to its vegetarian diet. <br><br>He probably descended from a gracile bipedal ape, such as Australopithecus afarensis or Australopithecus africanus.<\/a>','white',500)" onMouseout="hideddrivetip()">
    See this:
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Untitled</title>
    <style type="text/css">
    #dhtmltooltip{
    position: absolute;
    width: 150px;
    border: 2px solid black;
    padding: 2px;
    background-color: lightyellow;
    visibility: hidden;
    z-index: 100;
    /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
    }
    </style>
    </head>
    
    <body>
    <img class="logo" style="cursor: pointer" src="http://www.italia-mobili.it/themes/decodesign/img/logo.png" alt="Italia Mobili" onMouseover="ddrivetip('<img src=\'http://www.italia-mobili.it/themes/decodesign/img/logo.png\' style=\'position: relative; width:200px; height:40px; float: left; margin-right:10px; \'><a style=\'font-family: arial; font-size: 12px; \'>Homo habilis has a smaller face and smaller teeth than Australopithecines or older hominin species. But it still retains some ape-like features, including long arms and a moderately-prognathic face. <br><br>Its name, which means `handy man`, was given in 1964 because this species was thought to represent the first stone-tool maker. Currently, the oldest stone tools are dated slightly older than the oldest evidence of the genus Homo. <br><br>Homo habilis was the earliest known species of the genus Homo until May 2010, when Homo gautengensis was proposed by Darren Curnoe, a species theorized to be even older than Homo habilis. <br><br>Cranial capacity varied between 500 and 800 cc (with an average of 650 cc), which is small, considering that habilis was about 127 cm tall and weighed about 45 kg. Internal markings on the skull indicate that his brain had a humanlike shape. A bulge in the area used for speech on the left side of the brain (Broca`s area), suggests that habilis may have been capable of rudimentary speech. He was also the first hominid to add meat to its vegetarian diet. <br><br>He probably descended from a gracile bipedal ape, such as Australopithecus afarensis or Australopithecus africanus.<\/a>','white',500)" onMouseout="hideddrivetip()">
    <div id="dhtmltooltip" style="border: 1px solid black; padding: 5px"></div>
    
    <script type="text/javascript">
    /***********************************************
    * Cool DHTML tooltip script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var offsetxpoint=-60 //Customize x offset of tooltip
    var offsetypoint=20 //Customize y offset of tooltip
    var ie=document.all
    var ns6=document.getElementById && !document.all
    var enabletip=false
    if (ie||ns6)
    var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function ddrivetip(thetext, thecolor, thewidth){
    if (ns6||ie){
    if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
    if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
    tipobj.innerHTML=thetext
    enabletip=true
    return false
    }
    }
    
    function positiontip(e){
    if (enabletip){
    var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
    var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
    //Find out how close the mouse is to the corner of the window
    var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
    var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
    
    var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
    
    //if the horizontal distance isn't enough to accomodate the width of the context menu
    if (rightedge<tipobj.offsetWidth)
    //move the horizontal position of the menu to the left by it's width
    tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
    else if (curX<leftedge)
    tipobj.style.left="5px"
    else
    //position the horizontal position of the menu where the mouse is positioned
    tipobj.style.left=curX+offsetxpoint+"px"
    
    //same concept with the vertical position
    if (bottomedge<tipobj.offsetHeight)
    tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
    else
    tipobj.style.top=curY+offsetypoint+"px"
    tipobj.style.visibility="visible"
    }
    }
    
    function hideddrivetip(){
    if (ns6||ie){
    enabletip=false
    tipobj.style.visibility="hidden"
    tipobj.style.left="-1000px"
    tipobj.style.backgroundColor=''
    tipobj.style.width=''
    }
    }
    
    document.onmousemove=positiontip
    
    </script>
    
    </body>
    
    </html>

Similar Threads

  1. Replies: 2
    Last Post: 07-23-2012, 05:45 AM
  2. Rich HTML Balloon Tooltip -Can tooltip be above the link?
    By CindyH in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 09-08-2011, 04:23 AM
  3. Resolved Tooltip - Table Borders still visible after tooltip has closed.
    By Cyclone in forum JavaScript
    Replies: 2
    Last Post: 10-09-2008, 05:58 AM
  4. Rich HTML Balloon Tooltip > tooltip inside of another tooltip?
    By croceldon in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-24-2008, 03:35 PM
  5. Arrow in Fixed Tooltip script like in Cool DHTML Tooltip II
    By Null in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-01-2006, 03:23 PM

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
  •