popover

[raaafael 2]

Boa tarde,

estava com uma pequena dificuldade em relação a como utilizar um popover num elemento do site..

pra começar penso qe o problema pode ser tão simples como incluir o plugin certo e de forma certa.

Tenho um documento .js onde faço a chamada de todos os scripts como datepicker, theme, datatable e assim. Tentei incluir la o ficheiro da tooltip e do popover mas nao consigui resultados.

Se pudessem me indicar a forma corrta de incluir o plugin e fazer a chamada..

Obrigado desde ja..

[Ted k' 126]

Pode ser conflito, agora, onde você importa esses scripts, você usa todos eles de vez em uma página?

Veja o console do navegador para ver se tem algo conflitando.

[Khwesten Heiner 9]

Boa tarde, eu faço assim:

Esse exemplo aqui tirei de uma meu, uso o poopver em uma imagem. Você usa a lib jquery mesmo ou bootstrap?

<img id="id" class="img-circle" data-trigger="hover" data-content="Conteúdo" data-title="Cabeçalho" data-placement="top" data-container="body" style="width: 95px; height: 95px; padding: 2px;" src="localDaImagem.jpg" alt="95x95" data-target="#popover" data-toggle="popover" data-original-title="" title="">

Quanto ao teste do plugin, tenta usar a url do JQ na head, como fiz naquele outro post:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

Avisa aqui qualquer progresso ou estagnação.

XD

[Ted k' 126]

O minimo de lib possivel, no caso o jquery, agora se entendi bem, o que você precisar é chamar os plugins só quando for usar.

 

Se for possivel eu faço na unha mesmo, evitar o maximo de ter 5, 6, 10 arquivos js sendo chamando e o pior... só usando 2 na página

[Khwesten Heiner 9]

Não entendi sua abordagem...

 

Chamar os plugins só quando usar, quem falou sobre isso? Ah questão que comentei ali, é só para saber se o problema pode ser no JQ que ele está usando...

http://foundops.github.io/popover/

 

Ou

 

http://getbootstrap.com/

(O exemplo que usei no post acima é daqui)

[raaafael 2]

Pode ser conflito, agora, onde você importa esses scripts, você usa todos eles de vez em uma página?

Veja o console do navegador para ver se tem algo conflitando.

Faço a chamada deles todos no footer, essa parte não fui eu quem fiz, tenho muito pouca autonomia nisto por isso eu penso que seja assim. Acho qe o footer ta incluido em todas as paginas do site, por isso é feito a chamada la. Não sei como ver isto do console..

obrigado pela atençao

 

 

Boa tarde, eu faço assim:

Esse exemplo aqui tirei de uma meu, uso o poopver em uma imagem. Você usa a lib jquery mesmo ou bootstrap?

<img id="id" class="img-circle" data-trigger="hover" data-content="Conteúdo" data-title="Cabeçalho" data-placement="top" data-container="body" style="width: 95px; height: 95px; padding: 2px;" src="localDaImagem.jpg" alt="95x95" data-target="#popover" data-toggle="popover" data-original-title="" title="">

Quanto ao teste do plugin, tenta usar a url do JQ na head, como fiz naquele outro post:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

Avisa aqui qualquer progresso ou estagnação.

 

XD

Eu entei incluir o codigo na pagina so pra ver se funcionava mas não deu resultado..

Este problema é na mesma pagina que enviei naqele outro topico, o que pretendia era incluir o popover num elemento destes:

 echo '<a class="btn btn-mini disabled btn-danger" rel="tooltip" title="Telefone: ' . utf8_encode($row_telecomunicacao->telefone_chamadas) . '">Tlf</a>';

http://poupaki.pt/telecomunicacoes

Na tabela onde diz Telefone, por exemplo, a tag vermelha que diz TLF oque esta como tooltip é oqe gostaria de colocar como popover..

[Khwesten Heiner 9]

Assim como você eu não sou tão bom com JS, mas após alguns testes e pesquisas, só funcionou com esse arquivo aqui:

 

http://goo.gl/l3ydEk (link para pasta pública no meu dropbox onde publiquei o arquivo necessário para funcionamento do popover e tooltip, lembrando que é possivel consegui-lo baixando diretamente do site no link:

 

https://github.com/twbs/bootstrap/archive/v3.1.1.zip

 

Na pasta:

 

bootstrap-3.1.1/bootstrap-3.1.1/docs/assets/js)

 

Copia o que vai aparecer na tela, vai em um editor e salva como "arquivo.JS" e coloca ele na pasta do JS e na footer do html inicia ele (não remova o popover nem o tooltip, só adicione esse aew):

<script src="./js/docs.min.js"></script>

Para iniciar um tooltip:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

exemplo acima retirado do site: http://getbootstrap.com/javascript/#tooltips

 

Para iniciar um popover ao passar o mouse em cima:

(exemplo em imagem, mas pode usar em bottão, link ou qualquer outra coisa...)

<img data-toggle="popover" data-target="#popover" class="classe" src="imagem.jpg" data-container="body" data-toggle="popover" data-placement="top | right | left | boottom" data-content="teste" data-trigger="click | hover | focus | manual">

[raaafael 2]

 

Assim como você eu não sou tão bom com JS, mas após alguns testes e pesquisas, só funcionou com esse arquivo aqui:

 

http://goo.gl/l3ydEk (link para pasta pública no meu dropbox onde publiquei o arquivo necessário para funcionamento do popover e tooltip, lembrando que é possivel consegui-lo baixando diretamente do site no link:

 

https://github.com/twbs/bootstrap/archive/v3.1.1.zip

 

Na pasta:

 

bootstrap-3.1.1/bootstrap-3.1.1/docs/assets/js)

 

Copia o que vai aparecer na tela, vai em um editor e salva como "arquivo.JS" e coloca ele na pasta do JS e na footer do html inicia ele (não remova o popover nem o tooltip, só adicione esse aew):

<script src="./js/docs.min.js"></script>

Para iniciar um tooltip:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

exemplo acima retirado do site: http://getbootstrap.com/javascript/#tooltips

 

Para iniciar um popover ao passar o mouse em cima:

(exemplo em imagem, mas pode usar em bottão, link ou qualquer outra coisa...)

<img data-toggle="popover" data-target="#popover" class="classe" src="imagem.jpg" data-container="body" data-toggle="popover" data-placement="top | right | left | boottom" data-content="teste" data-trigger="click | hover | focus | manual">

 

Mano brigadão pelo tempo ae mas não consigui aqui..

criei o arquivo na pasta assets/js com o nome arquivo.js e chamei ele com:

<script type="text/javascript" src="<?= $assets_js ?>/arquivo.js"></script>

<script src="./js/docs.min.js"></script>

Mas nao deu certo.

Entao como nao intendo muito e ja estava tentando mesmo renomiei o arquivo qe criei para doc.min.js e usei

<script type="text/javascript" src="<?= $assets_js ?>/doc.min.js"></script>
<script src="./js/docs.min.js"></script>

Tambem não deu, fiz mais uns teste com este arquivo e com a iniciacao da tooltip e nada

[Khwesten Heiner 9]

Apenas com isso aqui em baixo, eu consegui fazer o popover funcionar.

<!DOCTYPE html>
<!-- saved from url=(0043)http://getbootstrap.com/examples/carousel/# -->
<html lang="pt">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
		
    </head>
    
    <body id="top" class="container">
				
			<img id="imgColorida" data-toggle="popover" data-target="#popover" class="img-circle" alt="95x95" 
			src="q.jpg" style="width: 95px; height: 95px; padding: 2px;"
			data-container="body" data-toggle="popover" data-placement="right" 
			data-content="teste" data-trigger="hover">
            
        </div>

        <script src="./js/jquery.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <script src="./js/docs.min.js"></script>			
		
	</body>
</html>

Quanto ao tooltip, estou fazendo os testes. Mais tarde farei os testes com os JS separados, como você faz ai no seu site, depois te passo mais informações.

[raaafael 2]

valeu meu, vo da uma olhada e fazer uns teste aqui agora, ontem nao consigui pq tinha outra parte do projeto pra priorizar. obrigado pela atenção ai..

 

 

quase Resolvido,

eu acrescentei bem o bootstrap.js que tinha la aquilo tudo da tooltip e do popover e os outros elementos, so que entretanto nao fazia a chamada dele ou oqe seja aquilo no footer. O que acrescentei nesta pagina e deu resultado foi:

 

 $('#span').hover(function() {        $(this).popover({            trigger: 'hover',            placement: 'bottom',            html: true        }).popover('show');        clickedAway = false        isVisible = true    });    $(document).click(function() {        if (isVisible & clickedAway) {            $('#span').popover('hide')            isVisible = clickedAway = false        } else {            clickedAway = true        }    });

So que pensei qe era so generalizar e colocar o id de tudo qe qeria qe aparecesse em popover, so que não.

Por exemplo com este codigo abaixo apenas o popover do primeiro surge, os outros nada acontece

 

 

<button type="button" class="btn btn-default" id="span" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">    Popover on left    </button><button type="button" class="btn btn-default" id="span" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">    Popover on top   </button>

No caso se alterar o id do primeiro o segundo ja aparece,

Alguem pra me dar uma luz? kk Agradecido desde ja

[raaafael 2]

Agora sim resolvido achei uma forma de generalizar a identificação do elemento qe qeria colocar em popover

 

    $("[rel='popover']").hover(function() {
        $(this).popover({
            trigger: 'hover',
            placement: 'bottom',
            html: true
        }).popover('show');
        clickedAway = false
        isVisible = true
    });
    $(document).click(function() {
        if (isVisible & clickedAway) {
            $("[rel='popover']").popover('hide')
            isVisible = clickedAway = false
        } else {
            clickedAway = true
        }
    });

Depois disso foi so acrescentar rel=popover onde quero fazelo surgir.