Tooltip or Hint in rowEditor in Primefaces

Question

Tooltip or Hint in rowEditor in Primefaces

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I'm having a problem, I wanted to add a tooltip or hint by hovering over the edit, confirm, and cancel icon for roweditor and celleditor of Primefaces .

I've researched and tried to use css but it did not work.

.ui-icon .ui-icon-pencil:hover {
    content:"This is a hint";
    background:yellow;
    padding:.5em;
    position:absolute;
    top:0;
    right:0;
    opacity:.9;
}

Html edit button

<span class="ui-icon ui-icon-pencil"></span>

Confirm button html

<span class="ui-icon ui-icon-check"></span>

And cancel button

<span class="ui-icon ui-icon-close"></span>

Can you do it?

Thank you

html css jsf primefaces

asked by anonymous 23.08.2014 / 16:00

2 answers

Problems with slideDown in jQuery Enter the name of the product in Edit and get the image of the bank in the TImage component

score 2 · Answer 1

I achieved this as a divine miracle of luck and inspiration to accomplish that fact.

In luck, I found this selector in the Primefaces manual.

.ui-state-hover

I just thought, after researching earlier, that should be the property when I hover over that object and it shows hint .

Then I created a jQuery method for every time the div.ui-row-editor element is created it performs the assignments.

$(document).on('mouseover click', 'div.ui-row-editor', function() {
    $('span.ui-icon-pencil').prop('title', 'Editar');
    $('span.ui-icon-close').prop('title', 'Cancelar');
    $('span.ui-icon-check').prop('title', 'Confirmar');
});

Good for you guys!

I saw some open requests in the forum of Primefaces but I managed to do it, if there was any criticism please inform and who knows modify!

score 1 · Answer 2

Macario, I used the :after pseudo-element to build your tooltip. Of course it can be stylized, I just did the bare minimum so that by hovering over the element you need it to appear.

In addition, he had an error in his selector, he is using the .ui-icon .ui-icon-pencil child rule instead of .ui-icon.ui-icon-pencil , so he never applied the rule to the correct element.

This is what CSS is like:

.ui-icon.ui-icon-pencil:hover:after,
.ui-icon.ui-icon-pencil:hover::after {
    content: attr(data-tooltip);
    /* Usei o atributo customizado data-tooltip para colocar uma mensagem no tooltip */
    background:yellow;
    padding:.5em;
    margin-left: 10px;
    opacity:.9;
}

In this case the tooltip will appear to the right of the element. If you want it to be left, use the :before pseudo-element.

I used two notations:% w / o of% that was defined in CSS2, and the% w / o notation of CSS3. The two are equal, but the :after has been changed to distinguish

pseudo-elements from pseudo-selectors .

HTML is the same, but I added a ::after attribute to customize the tooltip message (this can be generated by your component when writing the markup):

<span class="ui-icon ui-icon-pencil" data-tooltip="Mensagem">Icon</span>

I've created a JSFiddle to test.

More information take a look at the pseudo-elements documentation: link and link .