Help me how to use mouseover() event in frappe?

Frappe Framework App Development
1

$(“name”).mouseover(function(){
$(“name”).css(“background-color”, “yellow”);
});

here “name” is DocField.

2

Usually controls in desk have a data-fieldname property. How about right-click and “Inspect Element”?

3

@jsukrut

try this

$(“[data-fieldname=name]”).mouseover(function(){ your script })

2 Likes
4

Thanks @Sangram

Its working only i need to write this code onload_post_render:function(frm){} event.
eg.
onload_post_render:function(frm){
$(‘input[data-fieldname=name]’).mouseover(function(){
console.log(“Hello”);
})

}
1 Like
5

@Sangram
That code was not working in CustomScript File.
In My case, CustomScript like:

frappe.ui.form.on(“Pre Purchase Order”, “onload”, function(frm, cdt, cdn) {
alert(“onload”);
var d = frappe.get_doc(cdt, cdn);
var items_length = d.item.length;
for(var i=0; i < items_length; i++){
if(d.item[i].want_to_purchase!=0){
if(d.item[i].qty!=0){
var supplier = d.item[i].last_supplier;
alert(“onload”+d.item[i].last_purchase_price);
$(‘input[last_purchase_price=supplier]’).mouseover(function(){
alert(“onload”);
})
}
}
}

});

→ last_purchase_price is the data field name.
→ supplier is the value.

6

I tried with below code:

frappe.ui.form.on(cur_frm.doctype, {
‘onload_post_render’: function(frm, cdt, cdn) {

        frm.fields_dict.item.grid.wrapper.on('mouseover', 'input[data-fieldname="last_purchase_price"][data-doctype="Pre Purchase Order Item"]', function(e) {
            alert("event::" + e.type);
            //var d = frappe.get_(cdt, cdn)
            //var d = locals[cdt][cdn];
            alert(cur_frm.get_field("item").grid.grid_rows[0].doc.last_supplier);
            alert(cur_frm.get_field("item").grid.grid_rows[0].doc.po_number);
        });

}

});

Note:
Instead of alert, I have to implement ToolTip concept.

7

Any suggestions??

8

It is definetely work:-
$(“[data-fieldname=name]”).mouseover(function(){
$(“input[data-fieldname=name]”).css(“background-color”, “lightblue”);
});

2 Likes
11

You can use the below code and this is working for me
Note: programs is my field name

$(“[data-fieldname=programs]”).mouseover(function(){
$(“input[data-fieldname=‘programs’]”).tooltip({
title: __(frm.doc.programs)
});
});

1 Like
12

I have one question i.e., how can we use tooltip for a child table fields