CODEWITHSUNDEEP
androidjquerytwitter-bootstrapmobilepopover
Kokox
Kokox

Reputation: 519

Bootstrap3 - Disable Popover on mobile devices

I'm using the popover in hover mode when the mouse moves over the buttons of social networks. This works well in the browser but would like to be disabled in mobile devices or to be more exact, on devices that do not use mouse.

        <div class="collapse navbar-collapse navbar-ex2-collapse">
            <ul class="nav navbar-nav textomenu">
                <li><div id="example" data-trigger="hover" data-content="Comparte esta página!" data-original-title="Amixer Music" class="fb-like botonlike" data-href="http://www.traductoramixer.es/amixermusic/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li>
                <li><div id="example2" data-trigger="hover" data-content="Unete a nosotros!" data-original-title="Traductor Amixer" class="fb-like botonlike" data-href="https://www.facebook.com/traductoramixer.es" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li>
                <li><div id="example3" data-trigger="hover" data-content="Sigueme!" data-original-title="Kokox - Webmaster" class="fb-follow botoncomparte" data-href="http://www.facebook.com/elkokox" data-colorscheme="light" data-layout="button_count" data-show-faces="false"></div></li>
            </ul>
        </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

      <script>
          $(function (){
             $("#example").popover({

                placement: 'bottom'
             });

          });

          $(function (){
             $("#example2").popover();
          });

          $(function (){
             $("#example3").popover({
                placement: 'top'
             });
          });
      </script>

I have taken this decision because in the small screens, popover leaving margin and I think his use (hover mode) is unnecessary for devices that do not use mouse.

Thanks in advance.

Upvotes: 0

Views: 1665

Answers (1)

n1k1ch
n1k1ch

Reputation: 2692

See this answer.

You can use Modernizr to detect is device a touch device and based on it activate or no activate popover

JavaScript:

if (Modernizr.touch) {
   // activate popover
}

Upvotes: 1

Related Questions