[web2py] ToolTip feature in HTML Table

136 views
Skip to first unread message

Gaurav Shet

unread,
Jul 27, 2018, 10:33:45 AM7/27/18
to web...@googlegroups.com
Hi Guys,

I am looking to implement a tool tip feature to display content from the .DB on mouse hover(pointing to each of the cells) 

On Mousehover, I want to pull the unique data from the database for each of the cells.
I am not sure how can I achieve that for Web2py code.

Please refer to the attached screenshot.

Kindly suggest.


--
Thanks & Regards
Gaurav Shet
Screen Shot 2018-07-27 at 7.59.02 PM.png
Screen Shot 2018-07-27 at 7.59.23 PM.png

Val K

unread,
Jul 27, 2018, 3:33:03 PM7/27/18
to web2py-users
Hi!
Try 
XML('<span>%s</span>' % row.psb...)

Use expressions {{=...}} only in views

icodk

unread,
Jul 27, 2018, 6:36:40 PM7/27/18
to web2py-users

Hi Gaurav Shet
Here is a rather complex example for a tooltip on a field in a grid that shows a warning if an email is missing and explanation as in the attached image. It also has a link that takes you to an edit form where you can edit the customer and enter an email. 
hope it can get you started
attrib_no_email= {'_alt': '0', '_class': 'std-tooltip', '_data-placement': 'right', '_data-toggle': 'tooltip', '_title': T('mail address missing\nClick to add mail address')}

db.customer.email1.represent=lambda val,row: val if val else A(IMG(_src=URL('static', 'images/warning.png'), **attrib_no_email),_href=URL('shop', 'customer_list', args=['customer', 'edit', 'customer', row.id], user_signature=True))
...


Css in the vew:
.std-tooltip + .tooltip > .tooltip-inner {
background-color: #000000 ;
color: #FFFFFF;
border: 2px solid green;
padding: 10px;
border-radius: 8px;
font-size: 12px;
}


Dave S

unread,
Jul 27, 2018, 7:55:47 PM7/27/18
to web2py-users

You've got good answers about tooltips from others, so I'll only note that I kinda do tooltips for images by specifying the alt text (showing up as a tooltip doesn't occur in all browsers).

But if you need to create the tooltip from data that isn't already loaded (icodk has hizzen already), then you need to use javascript and ajax calls  For the web2py side, look at
<http://web2py.com/books/default/chapter/29/11/jquery-and-ajax>
(there is some hints about the javascript there, too).

If we haven't answered your question, please give us more information ... workflow, dataflow, steps you expect the user to take, etc.

/dps


Gaurav Shet

unread,
Jul 28, 2018, 3:34:43 AM7/28/18
to web...@googlegroups.com
Thank you Guys. The solution from Val K was a quick fix for me. 
Appreciate the help, Thanks Dave and ICODK for providing iunputs.

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--
Reply all
Reply to author
Forward
0 new messages