jQuery Tooltipster should show a hidden DIV on hover

Question

My code is

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script type="text/javascript" src="../../_js/jquery.tooltipster.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script>
    $(document).ready(function () {
        $('#HHH').tooltipster({
            content: $('#BTE' )
        })
    })
</script>

My div is <div id="BTE">ABCDEFG</div> and <div id="HHH"></DIV>

I want to hide my "BTE" initially and when hover AROUND "hhh", the "bte" should appear. I wonder how to achieve that? I had tried display:none but it doesn't work.

Yes, I tried display none, but either I got neither appear or both appear — user3344443, Mar 28 '14 at 07:17

score 1 · Answer 1 · edited Mar 28 '14 at 07:31

If you dont want to use any plugins, try like this,

// Initially hide the tooltip <div>
$("#HHH").hide();

// On mouse-over add some CSS and show the tooltip <div>
$("#BTE").mousemove(function (e) {
    $("#HHH").css("top", e.pageY);
    $("#HHH").css("margin-left", e.pageX);
    $("#HHH").show();
});

// On mouse-out hide the tooltip <div> again
$("#BTE").mouseout(function () {
    $("#HHH").hide();
});

Demo

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

0

Try like this: I analysed the plugin and put the solution for your issue. thanks

$(document).ready(function() {
    $('#HHH').tooltipster({
        content: $('<div id="BTE">ABCDEFG</div>')
    });
});


<div id="HHH"> 
    This div has a tooltip with HTML when you hover over it!
</div>

answered Mar 28 '14 at 07:20

Sudharsan S

15,336
3
31
49

that works well too! The only thing is that my "ABCDEFG" is a list of

user3344443

Mar 28 '14 at 07:26

user3344443 · Answer 3 · 2014-03-28T07:32:02.183

Thank you all! I added $('#HHH').tooltipster({ content: $('#BTE' ).show() }), and add another div display none to my "BTE" and it works

as below:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
 <script type="text/javascript" src="../../_js/jquery.tooltipster.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
   $(function () {
      $('#HHH').tooltipster({
          content: $('#BTE').show()
      })

  }) 
  </script>

  <div style="display:none">
  <div id="BTE" style="display:none">Driven by: <ul><li>Economics of scale (cost advantage)</li>
           <li>Patents and proprietary products</li>
          <li>Brand strength</li>
          <li>Government regulation</li>
          <li>Capital investment requirements</li>
          <li>Access to distribution channels</li>
      </ul>
  </div>
    </div>

you don't add Intially BTE id. Make it in tooltip – Sudharsan S Mar 28 '14 at 07:24 — Sudharsan S, Mar 28 '14 at 07:24

score 0 · Answer 4 · answered Mar 18 '16 at 13:06

This will update the tooltip with the content of the next hidden element (in my case a div with some html inside):

$(document).ready(function () {
    $('.tooltip').tooltipster({
        contentAsHTML: true,
        updateAnimation: false,
        functionBefore: function (origin, continueTooltip) {
            continueTooltip();

            if (!origin.data('cached')) {
                var content = origin.next().contents(); // get the next div
                origin.tooltipster('content', content).data('cached', true);
                origin.tooltipster('show');
            }
        }
    });
});

jQuery Tooltipster should show a hidden DIV on hover

4 Answers4