2

Estou com um problema, queria adicionar um tooltip ou hint ao pousar o mouse sobre o ícone editar, confirmar e cancelar do roweditore celleditor do Primefaces.

Já pesquisei e tentei usar css mas não deu muito certo.

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

Html do botão editar

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

Html do botão confirmar

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

E do botão cancelar

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

Tem como fazer?

Obrigado

2
  • 1
    Macario, poderia incluir o markup gerado pelo jsf (sem ser o facelets/jsp)? Em particular o html do componente em que quer adicionar esse tooltip. Esta usando jQuery UI? O jQuery UI tem um componente de tooltip, baseado em javascript, não sei se atende ao seu requisito.
    – Wakim
    23/08/2014 às 15:36
  • @Wakim este é código que o Chrome me mostra, claro que este componente esta dentro de uma datatable. Sobre o tooltip eu não sei se tem como usar neste caso por que de um 1 componente ele me gera três botões. 23/08/2014 às 15:56

2 Respostas 2

2

Consegui tal fato como um milagre divino de sorte e inspiração para realizar tal fato.

Na sorte encontrei este seletor, no manual do Primefaces.

.ui-state-hover

Logo pensei, após pesquisar anteriormente, essa deve ser a propriedade quando passo o mouse sobre tal objeto e ele mostra o hint.

Então criei um método jQuery para toda vez que o elemento div.ui-row-editor é criado ele executa as atribuições.

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

Bom ta aí para galera!

Vi algumas demandas em aberto no fórum do Primefaces mas consegui fazer, se houve alguma critica favor informar e quem sabe modificar!

1

Macario, usei o pseudo-elemento :after para construir seu tooltip. É claro que ele pode ser estilizado, apenas fiz o mínimo para que ao passar o mouse em cima do elemento que precisa, ele apareça.

Além disso tinha um erro em seu seletor, esta usando a regra de filho .ui-icon .ui-icon-pencil em vez de .ui-icon.ui-icon-pencil, logo ele nunca aplicava a regra no elemento correto.

Ficou assim o 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;
}

Nesse caso o tooltip vai aparecer a direita do elemento. Se quiser que fique a esquerda, use o pseudo-elemento :before.

Usei duas notações: :after que foi definida no CSS2, e a notação ::after do CSS3. As duas são iguais, porém a ::after foi alterada para distinguir pseudo-elements de pseudo-selectors.

O HTML é o mesmo, porém acrescentei um atributo data-tooltip para customizar a mensagem do tooltip (isso pode ser gerado pelo seu componente, ao escrever o markup):

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

Criei um JSFiddle para testar.

Mais infomações dê uma olhada na documentação dos pseudo-elementos: https://developer.mozilla.org/en-US/docs/Web/CSS/::after e https://developer.mozilla.org/en-US/docs/Web/CSS/::before.

8
  • Cara talvez eu tenha entendido errado o que você me pediu, eu coloquei o código gerado pelo navegador pelo componente <p:roweditor> 23/08/2014 às 18:52
  • 1
    Não é o roweditor que gera os spans/ícones que quer adicionar um tooltip?
    – Wakim
    23/08/2014 às 18:53
  • Sim, vou deixar mais explicito, onde coloco a mensagem que quero que apareça na tela? Porque pelo que vi no seu exemplo na página o componente span já leva a o atributo que você deifiniu... 23/08/2014 às 18:57
  • 1
    Na minha opinião seria extender o componente, basta olhar o código fonte do PrimeFaces e copiar o código do método que vai sobreescrever (adaptando para sua necessidade), já que não adianta muito reaproveitar o código da superclasse porque ele já vai ter fechado o markup. Por JavaScript também vai ter o problema da mensagem específica para cada tooltip, ai vai depender de qual componente de tooltip você vai usar para poder definir a mensagem.
    – Wakim
    23/08/2014 às 19:11
  • 1
    Se você ja está usando o jQuery UI, o primefaces usa, então recomendo esse componente: jqueryui.com/tooltip.
    – Wakim
    23/08/2014 às 19:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .