Exemplo ToolTip, Popover

Exemplo ToolTip e PopoVer no Bootstrap

Exemplo mostra uso de ToolTip e Popover, que são detalhes mostrados, ao parar seta do mouse sobre o botão, caixa de mensagem.

Imagem Exemplo.

  
Para Maiores informações, pesquise no site Oficial do BootStrap (Link).
Foi acrescentado novo script para essa funcionalidade se encontra no final do código. como apresentado no Site. 

Segue Código Fonte do Exemplo.

<body>       
      <div class="container">

      <div class="page-header">
      <h1>ToolTip BootStrap & Popover</h1>
      </div>


      <h3>ToolTip</h3>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Detalhes">Dica</button><br><br>

<div class="btn-toolbar">
      <div class="btn-group">
        <button  type="buttom" data-toggle="tooltip" class="btn btn-default glyphicon glyphicon-stop" title="STOP"></button>
        <button  type="buttom" data-toggle="tooltip" class="btn btn-default glyphicon glyphicon-pause" title="PAUSE"></button>
        <button  type="buttom" data-toggle="tooltip" class="btn btn-default glyphicon glyphicon-play" title="Play"></button>
      </div>
  </div>    

      <h3>Popover</h3>
      <button type="button" class="btn btn-sm btn-danger" data-toggle="popover" title="Funciona !!!"
      data-content="Aqui fica os detalhes" data-placement="right">Detalhes</button>
        
    </div> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script type="text/javascript">$(function () {$('[data-toggle="tooltip"]').tooltip() 
         $('[data-toggle="popover"]').popover()})</script>
    
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>


Comentários

Postar um comentário

Postagens mais visitadas deste blog

Botões Bootstrap Exemplos.

Imagem
Exemplo de Botões no Bootstrap! Exemplo se uso de botões no bootstrap, segue abaixo código fonte: <div class="container ">        <div class="page-header">         <h1>Botões Bootstrap</h1>  </div><!-- page reader Cabeçalho da Página -->                 <div class="row">           <div class="col-sm-6">                       <h3>Botões Padrão</h3>             <a href="#" class="btn btn-default">Botão link</a>             <input type="submit" class="btn btn-default" value="Botão">             <button class="btn btn-default">Botão Button</button>         </div>       ...
Leia mais

Conhecendo JavaScript - Eventos

Imagem
Eventos Os eventos são ações realizadas pelo usuário que são capturadas dentro do navegador, no JavaScript podemos captura-las como por exemplo o comportamento do movimento do mouse, um clique de uma tecla do teclado, até mesmo quando o usuário redimensiona a tela do browser, o carregamento da página, esses eventos possibilitam disparar ações. Os eventos trabalham em conjunto com as funções vista no ultimo estudo, caso não tenha se lembre volte no post e leia novamente. Eventos     Eventos do Mouse Os principais eventos de captura do mouse no browser são: ONCLICK - Acionado no clique do mouse. ONDBLCLICK - Acionado no clique duplo do mouse ONMOUSEDOWN - Acionado no clique do mouse(soltando ou não o botão) ONMOUSEOVER - Acionado quando cursor do mouse sobrepõe o elemento da página. ONMOUSEOUT   - Acionado quando o cursor do mouse sai da área de uma elemento da página. Para podermos começar precisamos de um elemento na página, para podemos visua...
Leia mais

Conhecendo JavaScript - HTML DOM

Imagem
DOM DOM ou (Document Object Model), é uma API multiplataforma que permite o acesso aos elementos que fazem parte da página utilizando o JavaScript.  Lembrando da estrutura da pagina html, nos temos as tags que geram os hipertextos, que encapsulam outras tags filhas e os textos,imagens...etc. Toda essa estrutura pode se imaginar como uma arvore onde ela é renderizada pela navegador e mostrada na tela, os elementos dessa arvore são chamados de nos ou NODE(inglês) ,segue ilustração da arvore. Sempre seguindo uma herarquia nota que a estrutura é simples para leitura de onde esta os elementos dentro da arvore  HTML. Com o Dom podemos fazer alteração diretamente ao elemento através de um evento, alterar uma cor,  esconder ou exibir uma tabela , acionar um evento com mouse sobre uma imagem e alterar brilho da imagem, tem muitas aplicações dinamicas possiveis. Para que isso funcione precisamos manipular os elementos (Node) no HTML,  como visto acima nessa arvor...
Leia mais