Forum dla administratorów stron WWW i developerów

Witaj!

AdminZone.pl to miejsce w którym możesz dowiedzieć się jak szybko i skutecznie wypromować swoją stronę WWW, zachęcić użytkowników do wypowiadania się i aktywnego udziału w życiu takiej strony.
Dołącz do naszej społeczności aby w pełni korzystać z usług oferowanych przez AdminZone.pl
Zaloguj się
lub
Zarejestruj się
 
Awatar użytkownika
Conor29134
Użytkownik
Posty: 88
Rejestracja: 17 maja 2013, 16:51

Inicjalizacja Tooltip w bootstrap

Autor tematu

07 kwie 2014, 23:23

Więc jak w temacie.
Mam problem z tym, w nagłówku zaaplikowałem skrypt JS inicjujący funkcje i próbowałem wstawić przykład z getbootstrap lecz nie ładował się.
kod:
<script type="text/javascript">

$('#myButton').tooltip('show');

</script>


i html:
<button id="myButton" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>


Może ktoś podpowiedzieć jak to zrobić ?


 
Awatar użytkownika
Ralfp
Stały użytkownik
Posty: 476
Rejestracja: 11 sie 2012, 9:16

Re: Inicjalizacja Tooltip w bootstrap

08 kwie 2014, 11:52

AFAIK jeśli inicjujesz JS tak jak każe to robić BS (a więc js włączasz przed końcem dokumentu), funkcje js BS nie będą dostępne w head.

Druga sprawa jest taka że są to rozszerzenia jQuery więc muszą być używane po inicjacji DOM:

<script type="text/javascript">
$(function() {
    $('#myButton').tooltip('show');
});
</script>


 
Awatar użytkownika
Conor29134
Użytkownik
Posty: 88
Rejestracja: 17 maja 2013, 16:51

Re: Inicjalizacja Tooltip w bootstrap

Autor tematu

08 kwie 2014, 15:36

Skrypt stawiałem w <head>
a ma działać w containerze


 
Awatar użytkownika
Macsch15
Administrator
Posty: 1968
Rejestracja: 10 sie 2012, 16:12
Lokalizacja: Polska
Kontaktowanie:

Re: Inicjalizacja Tooltip w bootstrap

08 kwie 2014, 17:13

W którym miejscu dołączasz JS bootstrapa? Na początku czy końcu dokumentu?


 
Awatar użytkownika
Conor29134
Użytkownik
Posty: 88
Rejestracja: 17 maja 2013, 16:51

Re: Inicjalizacja Tooltip w bootstrap

Autor tematu

08 kwie 2014, 17:26

Wszystko jest w nagłówku.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en" lang="en">
<head>
<!-- no cache headers -->
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expires" content="-1" />
   <meta http-equiv="Cache-Control" content="no-cache" />
   <!-- end no cache headers -->
<meta http-equiv="Content-Type" content="text/html; charset={$_CONF['info_row']['charset']}" />
<meta http-equiv="Content-Language" content="en" />
{if {$index}}
<meta name="keywords" content="{$keywords}" />
{else}
<meta name="keywords" content="{Des::while}{tags}{$tags['tag']},{/Des::while}keyword" />
{/if}
<meta name="description" content="{$description}" />
<!--[if gte IE 7]><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><![endif]-->
<link rel="shortcut icon" href="{$ForumAdress}favicon.ico" />




<!-- Bootstrap Start -->
<link rel="stylesheet" href="{$ForumAdress}styles/powerstrap/css/bootstrap.css">


<script type="text/javascript" src="{$ForumAdress}includes/js/jquery-2.1.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"></script>


<script  type="text/javascript"   src="{$ForumAdress}includes/js/jquery-tooltip.js"></script>










<link rel="alternate" type="application/rss+xml" title="{$lang['rss_subject']}" href="
{$ForumAdress}index.php?page=rss&amp;subject=1" />
{if {$index}}
<link rel="alternate" type="application/rss+xml" title="{$lang['rss_section']}" href="{$ForumAdress}
index.php?page=rss&amp;section=1&amp;id={$SECTION_ID}" />
{/if}                                                                                         
<style type="text/css" media="all">
 /*action_find_addons_css_1*/
  /*action_find_addons_css_2*/

</style>
<script type="text/javascript" src="{$ForumAdress}includes/js/pbboardCode.js"></script>
<script type="text/javascript" src="{$ForumAdress}includes/js/pbboard_global.js"></script>
<script type="text/javascript" src="{$ForumAdress}includes/js/jquery.js"></script>
<script type="text/javascript" src="{$ForumAdress}includes/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="{$ForumAdress}includes/js/poem.js"></script>
<script type="text/javascript" src="{$ForumAdress}includes/js/shCore.js"></script>
<script type="text/javascript" src="{$ForumAdress}includes/js/shBrushPhp.js"></script>
<script type="text/javascript">SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all();</script>
{if {$_CONF['info_row']['resize_imagesAllow']} == 1}
{template}imgs_resize{/template}
{/if}
<style type="text/css">.shakeimage{position:relative}</style>
<script type="text/javascript" src="{$ForumAdress}includes/js/effects.js"></script>


<script type="text/javascript">

$('#myButton').tooltip('show');

</script>





    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- Bootstrap -->
 
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>










<title>{$title}
{if {$_CONF['info_row']['allowed_powered']} == 1}
 - {$lang['powered']}
{/if}</title>
</head>
<body>
{template}header{/template}   


 
Awatar użytkownika
Macsch15
Administrator
Posty: 1968
Rejestracja: 10 sie 2012, 16:12
Lokalizacja: Polska
Kontaktowanie:

Re: Inicjalizacja Tooltip w bootstrap

08 kwie 2014, 17:47

To teraz zastosuj się do porady Rafała.


 
Awatar użytkownika
Conor29134
Użytkownik
Posty: 88
Rejestracja: 17 maja 2013, 16:51

Re: Inicjalizacja Tooltip w bootstrap

Autor tematu

09 kwie 2014, 20:07

Będe szczery nie zrozumiałem waszych postów.
Lecz jednak udało mi sie :E

w szablon footer wstawiłem kod JS:
<script>
$("* [rel='tooltip']").tooltip({
   html: true,
   
});

</script>

i tooltipy działają.
Troche dziwna sprawa że trzeba JS wstawiać na końcu dokumentu :/


 
Awatar użytkownika
Macsch15
Administrator
Posty: 1968
Rejestracja: 10 sie 2012, 16:12
Lokalizacja: Polska
Kontaktowanie:

Re: Inicjalizacja Tooltip w bootstrap

09 kwie 2014, 22:17

Conor29134 napisał/a:
Troche dziwna sprawa że trzeba JS wstawiać na końcu dokumentu :/


Dlaczego?


 
Awatar użytkownika
Conor29134
Użytkownik
Posty: 88
Rejestracja: 17 maja 2013, 16:51

Re: Inicjalizacja Tooltip w bootstrap

Autor tematu

10 kwie 2014, 18:07

Bo mało w życiu widziałem :D
Jeszcze 1 pytanie.
Da sie jakoś zrobić statycznego popovera ?
Chodzi o to żeby nie trzeba było klikać przycisku

         <div class="popover left">
                            <div class="arrow"></div>
                            <h3 class="popover-title">Popover left</h3>
                            <div class="popover-content">
                              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                            </div>
                          </div>
    </div>

W ten sposób nie działa


 
 
Awatar użytkownika
Conor29134
Użytkownik
Posty: 88
Rejestracja: 17 maja 2013, 16:51

Re: Inicjalizacja Tooltip w bootstrap

Autor tematu

10 kwie 2014, 20:49

Jednak skopiowałem html z przykładu i normalnie mi działa :D


Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 47 gości