2. PHPRunner General questions
  3. [SOLVED]  jQuery Tooltip at List Pages
This topic is locked
[SOLVED]

 jQuery Tooltip at List Pages

 		10/5/2016 11:54:57 AM
PHPRunner General questions
M
 Moise57 author

Hi everyone,
We know that PHPRunner has jQuery embedded.

My question : How can we add tooltips with dynamic data at PHPRunner list pages ?
Current Situation:

Columns: "Name" "Last Name" "Notes"

Data: "John" "Doe" "This user has Toyota car"

"..." "..." "..."
I want:

Columns: "Name" "Last Name" "Notes"

Data: "John" "Doe" "Note Icon"
If there is not a note, the page should show icon1.gif (i.e. grey icon) and if there is a note, the page should show icon2.gif (i.e. green icon)

When I move my mouse over the Note Icon of the first row, a Tooltip with the data "This user has Toyota car" in it should pop up.
Can you help me?
Thanks
romaldus 10/5/2016



Hi everyone,
We know that PHPRunner has jQuery embedded.

My question : How can we add tooltips with dynamic data at PHPRunner list pages ?
Current Situation:

Columns: "Name" "Last Name" "Notes"

Data: "John" "Doe" "This user has Toyota car"

"..." "..." "..."
I want:

Columns: "Name" "Last Name" "Notes"

Data: "John" "Doe" "Note Icon"
If there is not a note, the page should show icon1.gif (i.e. grey icon) and if there is a note, the page should show icon2.gif (i.e. green icon)

When I move my mouse over the Note Icon of the first row, a Tooltip with the data "This user has Toyota car" in it should pop up.
Can you help me?
Thanks


To setup conditional formatting in phprunner, please read this article:
http://xlinesoft.com/blog/2011/01/03/tutorial_conditional_formatting/
M
 		Moise57 author 10/6/2016

Hi Romaldus, thanks for contribution.
Conditional formatting will help to switch between icon2 vs icon1.
Do you have a solution on how can we add tooltip as I explained previously.
Admin 10/6/2016

Could you post a screenshot that would explain where you need to add that tooltip and how it should look? Just need some visuals.
M
 		Moise57 author 10/6/2016

Admin 10/7/2016

There are many options here. You can use ToolTipster for instance: http://iamceege.github.io/tooltipster/

  1. Plug in ToolTipster files.

<link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />

<script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>



2. Use 'View as' Custom to generate the required HTML

$value = '<img src="my-image.png" class="tooltip" title="'.$data["tooltip field"].'" />';


3. Add a call to initialize Tooltipster in Javascript OnLoad event

$('.tooltip').tooltipster();


Pretty straightforward, right?
M
 		Moise57 author 10/7/2016

Cool...
Thank you Admin <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=80432&image=1&table=forumreplies' class='bbc_emoticon' alt=':)' />