[jQuery-Bootstrap] cacher les tooltip selon les media queries

Parad0xJ
Javascript

Bonjour,

Mon soucis est entre les 2 ; jquery et CSS ( bootstrap).
Voila je rencontre un petit problème avec mon code. J'essai en vain de cacher les tooltips de mon site qui en développement, quand on arrive sur les écrans de petites tailles. J'ai fais plusieurs recherche, testé plusieurs choses mais rien à faire, J'avais trouvé une solution sur stackoverflow. Mais non ça marche pas pour moi.

Ce que je fais

En recherchant dans la doc aussi j'ai esssayé ce code mais en fait ça supprime carrément mon bouton quand je passe sur petit ecran

if ( (window.matchMedia("(max-width: 767px)").matches)) {

       $('[data-toggle="tooltip"]').tooltip('hide');
}

J'ai aussi trouvé une autre solution sur google avec la classe hidden-xs mais là encore ça ne fonctionne pas ça fait pareil que le premier code quand je passe sur petit ecran ça supprime mon bouton qui est aussi un lien

Voici le code du 1er de mes 4 boutons ou je veux faire disparaitre les tooltips sur petit ecran, les 4 sont sur le même modèle.

 <a href=# class="btn btn-default bt1" role='button' data-toggle='tooltip' data-placement='left' title='Mes projets freeCodeCamp' target='_blank'><i class="fa fa-codepen" aria-hidden="true"></i>CodePen</a>

Pourriez vous m'aider Merci d'avance

4 réponses

Lartak
Réponse acceptée

Bonsoir.
Le plus simple serait que tu fasses ces liens en double, dont la première catégorie qui aurait la classe qui permet de n'afficher que sur les petit écran (visible-xs il me semble) laquelle n'aurait pas de tooltip, soit pas de [data-toggle="tooltip"] et l'autre catégorie qui aurait la classe hidden-xs qui serait visible sur tous les autres types d'écran et qui aurait le [data-toggle="tooltip"].

Parad0xJ
Auteur

@Lartak
Merci de ta réponse je sais pas si j'ai tout bien compris, tu proposes que je fasse ça pour chaque bouton :

<a href=# class="btn btn-default visible-xs bt1" role='button' data-placement='left' title='Mes projets freeCodeCamp' target='_blank'><i class="fa fa-codepen" aria-hidden="true"></i>CodePen</a>

<a href=# class="btn btn-default hidden-xs bt1" role='button' data-toggle='tooltip' data-placement='left' title='Mes projets freeCodeCamp' target='_blank'><i class="fa fa-codepen" aria-hidden="true"></i>CodePen</a>

ça ne fait pas l'effet voulu ! c'est plus le tooltip façon bootstrap tu sais l'info bulle sur fond noir, mais ça me donne une info bulle normal sur petit écran

Lartak

En gros c'est ça.

c'est plus le tooltip façon bootstrap

Je ne te comprends plus là, je croyais que tu ne voulais plus afficher les tooltip :

J'essai en vain de cacher les tooltips de mon site qui en développement, quand on arrive sur les écrans de petites tailles

C'est sur que si les tooltip ne s'affichent plus sur les petits écrans, ce sera le comportement par défaut des navigateurs qui sera pris en compte.
Tu veux faire quoi exactement à la place d'afficher les tooltips ?

Parad0xJ
Auteur

Je Trouve que le tooltip sur petit ecran, étant donné qu'on navigue aux doigts n'est pas vraiment utile.
Je veux purement et simplement ne plus afficher de tooltip sur petit ecran.

Ah ok je comprends un truc , désolé jsuis un peu long à la détente, en fait avec ta solution, les infobulles qui apparaissent sur les petits écrans c'est le comportement par défaut du navigateur ok, je n'avais pas compris.

PS : un grand merci pour ton aide