Twitter Bootstrap Popover/Tooltip Bug with Mobile?

后端 未结 6 1220
执念已碎
执念已碎 2021-02-19 05:24

I am working with Twitter Bootstrap and ran into something I could not fix when testing on iPad and iPhone. On mobile (at least those devices) you need to click to engage the t

6条回答
  •  盖世英雄少女心
    2021-02-19 06:25

    Solution on this jsfiddle, test on iOS (iPad and iPhone), Android and Windows.

    $(document).ready(function(){
    
        var toolOptions;
        var toolOptions2;
        var isOS = /iPad|iPhone|iPod/.test(navigator.platform);
        var isAndroid = /(android)/i.test(navigator.userAgent);
    
        ///////////////////////////////////////// if OS
        if (isOS){
    
            toolOptions = {
                animation: false,
                placement:"bottom",
                container:"body"
            };
            $('.customtooltip').tooltip(toolOptions);
    
            $('.customtooltip').css( 'cursor', 'pointer' );
             $('body').on("touchstart", function(e){
                $(".customtooltip").each(function () {
                    // hide any open tooltips when the anywhere else in the body is clicked
                    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.tooltip').has(e.target).length === 0) {
                        $(this).tooltip('hide');
                    }////end if
                });
            });
    
        ///////////////////////////////////////// if Android
        } else if(isAndroid){
            toolOptions = {
                animation: false,
                placement:"bottom",
                container:"body"
            };
            toolOptions2 = {
                animation: false,
                placement:"left",
                container:"body"
            };
            $('.c_tool1').tooltip(toolOptions);
            $('.c_tool2').tooltip(toolOptions);
            $('.c_tool3').tooltip(toolOptions2);
    
        ///////////////////////////////////////// if another system
        } else {
            toolOptions = {
                animation: true,
                placement:"bottom",
                container:"body"
            };
            $('.customtooltip').tooltip(toolOptions);
    
        }//end if system
    
        document.getElementById("demo").innerHTML = "Sys: "+navigator.platform+" - isOS: "+isOS+" - isAndroid: "+isAndroid;
    
    });
    
    first tooltip Second tooltip third tooltip

提交回复
热议问题