Editable Tables - Icon Title

  
In an Editable Table, we can't get see the icons for saving, cancelling and deleting actions in the service studio, only on browser. Is there a way to use the css property "title" when putting the mouse over those three icons?

Thanks
Hello Bruno,

There are probably more ways of doing what you need, but I can try to help you with one of my own.

The code wasn't exactly the one I have below but It was something like that. The porpuse of this is to load after the original click is made and you can customize it the way you want.

Make a WB with the following script inside, you can plaice it inside a onDocumentReady function if you prefer. Make 3 text parameters to change the title to whatever you feel like : ) For now I'll leave placeholders but I think you will get it.

$('.EditableTable tr').click(function(e){
addTitles();
});
 
function addTitles(){
setTimeout(function(){ 
$('.RowControlGroup .SaveRowAction').attr('title','Save');
$('.RowControlGroup .CancelRowAction').attr('title','Cancel');
$('.RowControlGroup .DeleteRowAction').attr('title','Delete');
}, 200);
}

I have the set timeout to assure that it runs after the original script, so that the icons are created first.

Anything let me know : )
Cristiano

Cristiano Marques wrote:

Hello Bruno,

There are probably more ways of doing what you need, but I can try to help you with one of my own.

The code wasn't exactly the one I have below but It was something like that. The porpuse of this is to load after the original click is made and you can customize it the way you want.

Make a WB with the following script inside, you can plaice it inside a onDocumentReady function if you prefer. Make 3 text parameters to change the title to whatever you feel like : ) For now I'll leave placeholders but I think you will get it.

$('.EditableTable tr').click(function(e){
addTitles();
});
 
function addTitles(){
setTimeout(function(){ 
$('.RowControlGroup .SaveRowAction').attr('title','Save');
$('.RowControlGroup .CancelRowAction').attr('title','Cancel');
$('.RowControlGroup .DeleteRowAction').attr('title','Delete');
}, 200);
}

I have the set timeout to assure that it runs after the original script, so that the icons are created first.

Anything let me know : )
Cristiano


Hi Cristiano Marques,

I tried what you suggested but it didn't work. Can I ask where to put the js webblock?

Thanks.


Nina


Hi Bruno,

My solution for this was with css only.

.SaveRowAction:hover:after{
    content: "Gravar";
    background: #4c4c4c;
    background: rgba(0,0,0,.7);
    bottom: 26px;
    color: #fff;
    left: 20%;
    padding: 5px 10px;
    position: absolute;
    z-index: 98;
    width: 50px;
}

You can do this also with Js if you need to use multi-language.

Samuel