I am creating a div collection and generating a barcode like somethingBut when i hover on bar it expands and remains same Bootstrap iam using documentreadyfunction 39datatoggle34tooltip3439tooltip this is html ltdiv class34container34 style34padding 20px border dotted 0px whitespace nowrap overflowx auto34gt ltdiv style34borderleft black 006in solid display inlineblock height 12inpaddingright2px

Here I have created sample that will solve your all browser including chrome issueHTMLlthtml xmlns34httpwwww3org1999xhtml34gtlthead id34Head134gt lttitlegtlttitlegtltheadgtltbodygt ltform id34form234 runat34server34gt ltdivgt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjs34gtltscriptgt ltlink rel34stylesheet34 href39httpsmaxcdnbootstrapcdncombootstrap335cssbootstrapmincss39 media34screen34 gt ltscript type34textjavascript34 src39httpsmaxcdnbootstrapcdncombootstrap335jsbootstrapminjs39gtltscriptgt ltscript type34textjavascript34gt documentreadyfunction 39datatoggle34tooltip3439tooltip container 39body39

Display ToolTip on Barcode hover using jQuery

arjunsin...

SOLVED CLOSED ACTIVE ANSWERED
User: arjunsingh
Posted: on Oct 07, 2015 09:54 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 3642

I am creating a div collection and generating a barcode like something.

But when i hover on bar it expands and remains same

Bootstrap iam using

 $(document).ready(function () {$('[data-toggle="tooltip"]').tooltip();

        });

this is html

<div class="container" style="padding: 20px; border: dotted 0px; white-space: nowrap; overflow-x: auto;">
            <div style="border-left: black 0.06in solid; display: inline-block; height: 1.2in;padding-right:2px" data-toggle="tooltip" title="In a huge forest where the listening Night & Match :50%"></div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in" data-toggle="tooltip" title="In a huge forest where the listening Night"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in" data-toggle="tooltip" title="In a huge forest where the listening Night"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in" data-toggle="tooltip" title="In a huge forest where the listening Night"></div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in" data-toggle="tooltip" title="In a huge forest where the listening Night"></div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.06in solid; display: inline-block; height: 1.2in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.06in solid; display: inline-block; height: 1.2in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.06in solid; display: inline-block; height: 1.2in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.06in solid; display: inline-block; height: 1.2in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"></div>
        </div>

Shashika...

0 7

Reply
ANSWER
User: Shashikant
Replied: on Oct 13, 2015 09:36 AM
Report

Here I have created sample that will solve your all browser including chrome issue.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title></title>
</head>
<body>
    <form id="form2" runat="server">
    <div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'
            media="screen" />
        <script type="text/javascript" src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('[data-toggle="tooltip"]').tooltip({
                    container: 'body'
                }
                    );
            }); 
        </script>
        <br />
        <br />
        <br />
        <div class="container" style="padding: 20px; border: dotted 0px; white-space: nowrap;
            overflow-x: auto;">
            <div style="border-left: black 0.06in solid; display: inline-block; height: 1.2in;
                padding-right: 2px" data-toggle="tooltip" data-container="body" title="In a huge forest where the listening Night & Match :50%">
            </div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in" data-toggle="tooltip"
                title="In a huge forest where the listening Night" data-container="body">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"
                data-toggle="tooltip" title="In a huge forest where the listening Night" data-container="body">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"
                data-toggle="tooltip" title="In a huge forest where the listening Night" data-container="body">
            </div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in"
                data-toggle="tooltip" title="In a huge forest where the listening Night" data-container="body">
            </div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.06in solid; display: inline-block; height: 1.2in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.06in solid; display: inline-block; height: 1.2in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: grey 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.06in solid; display: inline-block; height: 1.2in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.06in solid; display: inline-block; height: 1.2in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
            <div style="border-left: black 0.04in solid; display: inline-block; height: 1in">
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Demo

Display ToolTip on Barcode hover using jQuery

Company

Explore

Follow us

Contact Us