Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Administration ...Administration ...How to create tooltips for table in DotNetNuke?How to create tooltips for table in DotNetNuke?
Previous
 
Next
New Post
5/12/2008 4:23 AM
 

I am trying to research using Javascript in  DotNetNuke. Accidentally, I found an article from _http://www.howtodotnetnuke.com/Blog/tabid/54/EntryID/4/Default.aspx. I followed his instructions. The javascript code is put in a js file in the site folder.  Other code is listed below:

 

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Try
                ClientAPI.RegisterClientScriptBlock(Me.Page, "tooltipVB_1.js", "<script type='text/javascript' src='/DucMinhNguyen/tooltipVB_1.js'></script>")
                ClientAPI.RegisterStartUpScript(Me.Page, "", "<script type=\'text/javascript\'>document.onmousemove=positiontip</script>")
            Catch exc As Exception        'Module failed to load
                ProcessModuleLoadException(Me, exc)
            End Try
        End Sub

        Protected Sub gvNotes_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles gvNotes.RowDataBound



            'Create pop up tool tip for the user id note field

            If e.Row.RowType = DataControlRowType.DataRow Then

                Dim tip As String = "ddrivetip('This user has a DotNetNuke User ID of: " + DataBinder.Eval(e.Row.DataItem, "UserID").ToString + "','#76a5d3', 250)"

                e.Row.Attributes.Add("onmouseover", tip)

                e.Row.Attributes.Add("onmouseout", "hideddrivetip()")

            End If



        End Sub

 

However, when I move over the table, there is an error that I read from FireBug. The content of the error is tipobj has no property. Please tell me how to fix it. I am afraid that tipobj is referenced before it is loaded in the page.

Thank in advance.

 
New Post
5/12/2008 7:09 AM
 

Are you missing a pair of brackets and possibly a semi-colon in your start up string registration?

   <script type=\'text/javascript\'>document.onmousemove=positiontip();</script>

Regards, Rhys.


www.rmjcs.com - Mostly SQL Server Stuff
 
New Post
5/12/2008 9:30 PM
 

Thank for your reply. I can display the tooltip. However, there is still a problem. The position of the tooltip is fixed. I am trying to show it in the postion of the cursor. Here is my code:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Try
                ClientAPI.RegisterClientScriptBlock(Me.Page, "tooltipVB_1.js", "<script type='text/javascript' src='/DucMinhNguyen/tooltipVB_1.js'></script>")
            Catch exc As Exception        'Module failed to load
                ProcessModuleLoadException(Me, exc)
            End Try
        End Sub

Protected Sub gvNotes_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles gvNotes.RowDataBound



            'Create pop up tool tip for the user id note field

            If e.Row.RowType = DataControlRowType.DataRow Then
                Dim tip As String = "ddrivetip('This user has a DotNetNuke User ID of: " + DataBinder.Eval(e.Row.DataItem, "UserID").ToString + "','#99FF00', 250)"
                e.Row.Attributes.Add("onmouseover", tip)
                e.Row.Attributes.Add("onmouseout", "hideddrivetip()")

            End If
        End Sub

I put these code in the bottom of .ascx file.

<div id="dhtmltooltip">abc</div>
<script language="javascript" type="text/javascript">
tipobj1();
document.onmousemove=positiontip;
</script>

And here is .js file.

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") : ""
var tipobj;


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=''
}
}


function tipobj1()
{
    tipobj = document.getElementById("dhtmltooltip");
}

In the function positiontip, there is parameter e. And I don't know how to deal with it.

 
New Post
5/12/2008 10:34 PM
 

The DNN Events module has tooltip.  You might want to check it out.


Robert Tango
www.workcontrol.com
Custom Modules: UserManager|UserDirectory|UserImport|PortalSSO
 
New Post
5/12/2008 11:11 PM
 

Thank for your hint. I didn't know that feature in Events module. I will check it out.

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Administration ...Administration ...How to create tooltips for table in DotNetNuke?How to create tooltips for table in DotNetNuke?


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out