Jump to content
superminou

Utilisation JS plugin bootstrap dans prestashop 1.6

Recommended Posts

Si je veux utiliser la librairie de plugin JS bootstrap, tout est deja integre dans prestashop 1.6 ?

 

Exemple concret avec TOOLTIPS : http://getbootstrap.com/javascript/#tooltips

 

Si je copie-colle ca :

 

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

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

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

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

 

Ca fonctionne ?

 

Ou dois-je rajouter 

 

$('#example').tooltip(options)

 

MERCI d'avance.

 

ps : 6 fois de suite que je retape mon post sans que ca fonctionne, ca me renvoi sur l'accueil !!!  :angry:

Share this post


Link to post
Share on other sites

HS :

 

Pour l'equipe presta qui gere le forum :

 

Ok pour info si je met mon code en mode code source, ca plante, ne poste pas et me renvoie sur l'accueil.

6 tentatives echouees et la ca fonctionne si je ne mets rien en code source.

Share this post


Link to post
Share on other sites

En fait je me rends compte que l'editeur sur la page description n'apprecie pas tant que ca le HTML.

 

Il prend certains passages et transforme le reste en texte.

 

Doit-on se resoudre a parametrer le tinyMCE editeur ou bien est-ce un bug.

 

Exemple precis :

 

ce code :

 

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
 
devient :
 
Tooltip on left
 
Bug presta ou c'est normal ???

Share this post


Link to post
Share on other sites

If you didn't fixed it, You can use the default tooltip activation (one for each layout/effect you want).

Something like this:

 

Google translated:

Si vous ne l'avez pas fixe, vous pouvez utiliser l'activation de l'info-bulle par défaut (un pour chaque mise en page / effet que vous voulez). 
Quelque chose comme ceci:
$(document).ready(function() {
$(".tooltip").tooltip({
        placement : 'top',
animation: true,
});
$(".tooltip-top").tooltip({
        placement : 'top',
animation: true,
});
$(".tooltip-left").tooltip({
        placement : 'left',
animation: true,
});
$(".tooltip-bottom").tooltip({
        placement : 'bottom',
animation: true,
});
$(".tooltip-right").tooltip({
        placement : 'top',
animation: true,
});
$(function () { $("[data-toggle='tooltip']").tooltip(); });
});

And some CSS:

Et un peu de CSS:

/* tooltip CSS */
.tooltip{
    position:absolute;
    z-index:1020;
    display:block;
    visibility:visible;
    padding:5px;
    font-size:11px;
    opacity:0;
    filter:alpha(opacity=0)
}
.tooltip.in{
    opacity:.8;
    filter:alpha(opacity=80)
}
.tooltip.top{
    margin-top:-2px
}
.tooltip.right{
    margin-left:2px
}
.tooltip.bottom{
    margin-top:2px
}
.tooltip.left{
    ;
    left:50%;
    ;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #000
}
.tooltip.left .tooltip-arrow{
    top:50%;
    right:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #000
}
.tooltip.bottom .tooltip-arrow{
    top:0;
    left:50%;
    ;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid #000
}
.tooltip.right .tooltip-arrow{
    top:50%;
    left:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-right:5px solid #000
}
.tooltip-inner{
    max-width:200px;
    padding:3px 8px;
    color:#fff;
    text-align:center;
    text-decoration:none;
    background-color:#000;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px
}
.tooltip-arrow{
    position:absolute;
    width:0;
    height:0
}

Good luck.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More