want to customise tooltip for mobile view

Question

I had created tooltip code for all directions popup but I want to popup only to top in mobile device please help me. I can't able to code @media screen code please anyone help me. Write a code for mobile devices where the only popup of (tooltip.top) work

 .tooltip {
    display:inline-block;
    position:relative;
    border-bottom:2px solid #ff5733;
    text-align:left;
}

.tooltip .right {
    min-width:200px; 
    top:50%;
    left:100%;
    margin-left:20px;
    transform:translate(0, -50%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.tooltip:hover .right {
    visibility:visible; opacity:1;
}

.tooltip .right i {
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}

.tooltip .right i::after {
    content:&#39;&#39;;
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.tooltip .top {
    min-width:200px; 
    top:-20px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.tooltip:hover .top {
    visibility:visible; opacity:1;
}

.tooltip .top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip .top i::after {
    content:&#39;&#39;;
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.tooltip .bottom {
    min-width:200px; 
    top:40px;
    left:50%;
    transform:translate(-50%, 0);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.tooltip:hover .bottom {
    visibility:visible; opacity:1;
}

.tooltip .bottom i {
    position:absolute;
    bottom:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip .bottom i::after {
    content:&#39;&#39;;
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,50%) rotate(45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.tooltip .left {
    min-width:200px; 
    top:50%;
    right:100%;
    margin-right:20px;
    transform:translate(0, -50%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    border:3px solid #ff5733;box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.tooltip:hover .left {
    visibility:visible; opacity:1;
}

.tooltip .left i {
    position:absolute;
    top:50%;
    left:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}

.tooltip .left i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
    background-color:#EEEEEE;
    border:3px solid #ff5733;box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

<span class="btn btn-primary tooltip">Hover Me to Preview
    <span class="bottom">
        <h3>Lorem Ipsum</h3>
        <p>Dolor sit amet, consectetur adipiscing elit.ofugugvufg
        efuwgefwgcvurwef
        wfierhfvierhvoerihvr</p>
        <i></i>
    </span>
</span>

<span class="btn btn-primary tooltip">Hover Me to Preview
    <span class="top">
        <h3>Lorem Ipsum</h3>
        <p>Dolor sit amet, consectetur adipiscing elit.</p>
        <i></i>
    </span>
</span>
<span class="btn btn-primary tooltip">Hover Me to Preview
    <span class="left">
        <h3>Lorem Ipsum</h3>
        <p>Dolor sit amet, consectetur adipiscing elit.</p>
        <i></i>
    </span>
</span>
<span class="btn btn-primary tooltip">Hover Me to Preview
    <div class="right">
        <h3>Lorem Ipsum</h3>
        
        <p><img alt="The Bangle Sellers Poem's Workbook Solution" border="0" data-original-height="427" data-original-width="760" src="https://newsroom.ibm.com/image/security%2Bthumbnail%2B400x400.png"> consectetur 
        efrnvlkfnv</p>
        <i></i>
    </div>
    </span>

code for tooltips for all direction here is the code

So. If the tooltip with `.popup.bottom` is on mobile, will it open up? Or it would not work? — ISD, Apr 20 '20 at 07:10

score 1 · Accepted Answer · answered Apr 20 '20 at 08:10

You want to show it on top on mobile, so I have added some margin top to body so that we can have some space above and you can see your pop up, all you need to do is add a common class on every popup div or span and style it in same way like others, no different positions for each, same position of every pop up which will show it on top.

.tooltip {
        display: inline-block;
        position: relative;
        border-bottom: 2px solid #ff5733;
        text-align: left;
    }

    .tooltip .right {
        min-width: 200px;
        top: 50%;
        left: 100%;
        margin-left: 20px;
        transform: translate(0, -50%);
        padding: 10px 20px;
        color: #444444;
        background-color: #EEEEEE;
        font-weight: normal;
        font-size: 13px;
        border-radius: 8px;
        position: absolute;
        z-index: 99999999;
        box-sizing: border-box;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.8s;
    }

    .tooltip:hover .right {
        visibility: visible;
        opacity: 1;
    }

    .tooltip .right i {
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -12px;
        width: 12px;
        height: 24px;
        overflow: hidden;
    }

    .tooltip .right i::after {
        content: &#39;
        &#39;
        ;
        position: absolute;
        width: 12px;
        height: 12px;
        left: 0;
        top: 50%;
        transform: translate(50%, -50%) rotate(-45deg);
        background-color: #EEEEEE;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    }

    .tooltip .top {
        min-width: 200px;
        top: -20px;
        left: 50%;
        transform: translate(-50%, -100%);
        padding: 10px 20px;
        color: #444444;
        background-color: #EEEEEE;
        font-weight: normal;
        font-size: 13px;
        border-radius: 8px;
        position: absolute;
        z-index: 99999999;
        box-sizing: border-box;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.8s;
    }

    .tooltip:hover .top {
        visibility: visible;
        opacity: 1;
    }

    .tooltip .top i {
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -12px;
        width: 24px;
        height: 12px;
        overflow: hidden;
    }

    .tooltip .top i::after {
        content: &#39;
        &#39;
        ;
        position: absolute;
        width: 12px;
        height: 12px;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        background-color: #EEEEEE;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    }

    .tooltip .bottom {
        min-width: 200px;
        top: 40px;
        left: 50%;
        transform: translate(-50%, 0);
        padding: 10px 20px;
        color: #444444;
        background-color: #EEEEEE;
        font-weight: normal;
        font-size: 13px;
        border-radius: 8px;
        position: absolute;
        z-index: 99999999;
        box-sizing: border-box;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.8s;
    }

    .tooltip:hover .bottom {
        visibility: visible;
        opacity: 1;
    }

    .tooltip .bottom i {
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -12px;
        width: 24px;
        height: 12px;
        overflow: hidden;
    }

    .tooltip .bottom i::after {
        content: &#39;
        &#39;
        ;
        position: absolute;
        width: 12px;
        height: 12px;
        left: 50%;
        transform: translate(-50%, 50%) rotate(45deg);
        background-color: #EEEEEE;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    }

    .tooltip .left {
        min-width: 200px;
        top: 50%;
        right: 100%;
        margin-right: 20px;
        transform: translate(0, -50%);
        padding: 10px 20px;
        color: #444444;
        background-color: #EEEEEE;
        font-weight: normal;
        font-size: 13px;
        border-radius: 8px;
        position: absolute;
        z-index: 99999999;
        box-sizing: border-box;
        border: 3px solid #ff5733;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.8s;
    }

    .tooltip:hover .left {
        visibility: visible;
        opacity: 1;
    }

    .tooltip .left i {
        position: absolute;
        top: 50%;
        left: 100%;
        margin-top: -12px;
        width: 12px;
        height: 24px;
        overflow: hidden;
    }

    .tooltip .left i::after {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        left: 0;
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        background-color: #EEEEEE;
        border: 3px solid #ff5733;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    }


    @media(max-width: 767px) {
        body {
            margin-top: 500px;
        }
        .tooltip>.toolTipWrap i:after {
          content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    border: 3px solid #ff5733;
        }
        .tooltip>.toolTipWrap {
            left: 50% !important;
            top: auto !important;
            transform: translateX(-50%);
            right: auto !important;
            bottom: 150% !important;
        }

        .tooltip>.toolTipWrap i {
            position: absolute;
            top: 100%;
            left: 50%;
            margin-top: 0px;
            width: 12px;
            height: 24px;
            overflow: hidden;
            transform: rotate(90deg) translateX(-50%);
            background: transparent;
        }
    }

<span class="btn btn-primary tooltip">Hover Me to Preview
        <span class="bottom toolTipWrap">
            <h3>Lorem Ipsum</h3>
            <p>Dolor sit amet, consectetur adipiscing elit.ofugugvufg
                efuwgefwgcvurwef
                wfierhfvierhvoerihvr</p>
            <i></i>
        </span>
    </span>
    <span class="btn btn-primary tooltip">Hover Me to Preview
        <span class="top toolTipWrap">
            <h3>Lorem Ipsum</h3>
            <p>Dolor sit amet, consectetur adipiscing elit.</p>
            <i></i>
        </span>
    </span>
    <span class="btn btn-primary tooltip">Hover Me to Preview
        <span class="left toolTipWrap">
            <h3>Lorem Ipsum</h3>
            <p>Dolor sit amet, consectetur adipiscing elit.</p>
            <i></i>
        </span>
    </span>
    <span class="btn btn-primary tooltip">Hover Me to Preview
        <div class="right toolTipWrap">
            <h3>Lorem Ipsum</h3>
            <p><img alt="The Bangle Sellers Poem's Workbook Solution" border="0" data-original-height="427" data-original-width="760" src="https://newsroom.ibm.com/image/security%2Bthumbnail%2B400x400.png"> consectetur
                efrnvlkfnv</p>
            <i></i>
        </div>
    </span>

Thanks a lot, sir, you got it right. For a long period of time I was playing with code but I can't get the right way you had solved my problem. One thing more I want to know that is there any way that some of the tooltip boxes is going out of the screen so they can appear completely. So I want to know that is there any way to make it auto-adjust. — Joohu Kumari, Apr 20 '20 at 09:23
by CSS there is work around, but for that you need to compromise with your design a little bit, all you need to do, if you can, just keep your caret at the start of you tool tip not in center, and make the left 0 and remove the transform: translateX(-50%); property. so all the tool tip content then will look good, but your caret will not be at same place. — Atul Rajput, Apr 20 '20 at 11:47
its a rectangle shape which shows the infection of something, https://www.google.com/search?q=caret+in+bootstrap&rlz=1C1GCEU_enIN822IN822&source=lnms&tbm=isch&sa=X&ved=2ahUKEwj95tWci_foAhUjzzgGHVONDwoQ_AUoAXoECA8QAw&biw=1366&bih=657 — Atul Rajput, Apr 20 '20 at 13:17

score 0 · Answer 2 · answered Apr 20 '20 at 07:28

0

You can out a media query for specific css for mobile devices , something like:

@media (max-width: 768px) {
    //Add your css here for example
    .tooltip:hover .right {
        visibility:visible; opacity:1;
    }
 }

answered Apr 20 '20 at 07:28

400_bad_request

121
4

want to customise tooltip for mobile view

2 Answers2