Tooltip or Hint in rowEditor in Primefaces

Asked

Viewed 1,113 times

2

I have a problem, I wanted to add a tooltip or hint by hovering the mouse over the edit, confirm and cancel icon roweditorand celleditor of Primefaces.

I’ve researched and tried using css but it didn’t work out so well.

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

Edit button html

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

Confirm button html

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

And the cancel button

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

Can do?

Thank you

html css jsf primefaces
  • 1

    Macario, could you include the jsf-generated Markup (not facelets/jsp)? In particular, the html of the component you want to add this tooltip to. Using jQuery UI? jQuery UI has a javascript-based tooltip component, I don’t know if it meets your requirement.

  • @Wakim this is code that the Chrome show me, of course this component is inside a datatable. About the tooltip I do not know if it has how to use in this case why of a 1 component it generates me three buttons.

2 answers

2

I got such a fact as a divine miracle of luck and inspiration to accomplish such a fact.

Lucky I found this dial in the Primefaces manual.

.ui-state-hover

I soon thought, after searching earlier, this must be the property when I hover over such an object and it shows the hint.

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

$(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');
});

All right, y'all, y'all!

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

1

Macario, I used the pseudo-element :after to build your tooltip. Of course it can be stylized, I just did the least so that when you hover the mouse over the element you need, it appears.

Also had an error in its selector, this using the son rule .ui-icon .ui-icon-pencil instead of .ui-icon.ui-icon-pencil, so he never applied the rule to the correct element.

Thus was the CSS:

.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 widget. If you want it to stay to the left, use the pseudo-element :before.

I used two notations: :after defined in CSS2, and the notation ::after CSS3. Both are equal, but the ::after was changed to distinguish pseudo-Elements of pseudo-selectors.

HTML is the same, but I added an attribute data-tooltip to customize the tooltip message (this can be generated by your component, when typing Markup):

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

I created a Jsfiddle to test.

More info take a look at the documentation of the pseudo-elements: https://developer.mozilla.org/en-US/docs/Web/CSS/:after and https://developer.mozilla.org/en-US/docs/Web/CSS/:before.

  • Dude I may have misunderstood what you asked me, I put the browser generated code by the component <p:roweditor>

  • 1

    Is not the roweditor that generates the spans/icons that want to add a tooltip?

  • Yes, I’ll make it more explicit, where do I put the message I want to appear on the screen? Because from what I saw in your example on the page the component span already leads to the attribute you deified...

  • The message I put in the attribute data-tooltip who I believe the roweditor do not write. To write I recommend extending this component and adding the attribute. If not so, only with Javascript.

  • What is the simplest way? Because I think generating a new component would be more laborious... Actually running it n inherited the attribute.

  • 1

    In my opinion it would be to extend the component, just look at the source code of Primefaces and copy the code of the method that will overwrite (adapting to your need), since it is not much use to reuse the code of the superclass because it will already have closed the Markup. By Javascript will also get the message problem specific to each tooltip, ai will depend on which component of tooltip you will use to be able to define the message.

  • Do you have any post or example of how to use Js?

  • 1

    If you are already using jQuery UI, primefaces uses, then I recommend this component: http://jqueryui.com/tooltip/.

Show 3 more comments

Browser other questions tagged html css jsf primefaces

You are not signed in. Login or sign up in order to post.