i18n problem

[skaman82]

Hi Stephan,

great work on jBox! I have a quick question about it.
I need the tooltips to show a specific text for each tooltip. The text is placed in a separate json file.

In the HTML the contents of the language file are called this way:

There can be different tooltips an a single page.
How can I modify this to work?

Thanks a lot in advance!

[skaman82]

I got this working with: content: $('#tooltiptext'), but it shows me only the first element with the id in each tooltip. How do I show the right text in each tooltip. It only should show the child div of the tooltip div.

This is my HTML Structure:

<div class="tooltip"><div id="tooltiptext" i18n="text1" style="display:none;"></div></div>
<div class="tooltip"><div id="tooltiptext" i18n="text2" style="display:none;"></div></div>
<div class="tooltip"><div id="tooltiptext" i18n="text3" style="display:none;"></div></div>

[tajenli]

You need unique id for each element. In your case, it's better to use class as selector instead of using id.

<div class="tooltip"><div id="tooltiptext1" i18n="text1" class="jb-tooltip" style="display:none;"></div></div>
<div class="tooltip"><div id="tooltiptext2" i18n="text2" class="jb-tooltip" style="display:none;"></div></div>
<div class="tooltip"><div id="tooltiptext3" i18n="text3" class="jb-tooltip" style="display:none;"></div></div>

Then you can use $(".jb-tooltip"), or $("#tooltiptext1, #tooltiptext2, #tooltiptext3"). Both ways should work.

[skaman82]

@tajenli thanks. yes using $(".jb-tooltip") would be better for me also. My problem is in each tooltip i get now all text together instead of showing each text in a separate tooltip. Is the a way to use only the direct child . jb-tooltip from .tooltip element?

to clarify: I get now text1,text2,text3 in each tooltip instead of the specific content

[tajenli]

Here are the sample codes. 1st one use default title attr. for content, 2nd one use data-jb-title &data-jb-content for content. Hope this help.

html

  <button class="btn btn-default jb-tooltip" title="My tooltip">Tooltip 1</button>
  <button class="btn btn-default jb-tooltip" title="My tooltip 2">Tooltip 2</button>
  <button class="btn btn-default" id="jb-tooltip-click2" title="My tooltip Click 2" data-jb-title="data- Title" data-jb-content="data- <b>Content</b>, <a href='https://www.google.com' target='_blank'>google</a>">Tooltip Click 2</button>

js

jQuery(document).ready(function($) {
  // use title attr.
  $('.jb-tooltip').jBox('Tooltip');
  // use data-jb-title & data-jb-content attr.
  $('#jb-tooltip-click2').jBox('Tooltip', {
    trigger: 'click',
    width: 300,
    getTitle: 'data-jb-title',
    getContent: 'data-jb-content',
    closeButton: 'title',
    closeOnClick: 'body',
    closeOnEsc: true,
  });
});

[skaman82]

@tajenli
This is my HTML

<div class="helpicon cf_tip">
<div class="cf_tooltiptext" i18n="tabPidTuning" style="display:none;"></div>
</div>  
<div class="helpicon cf_tip">
<div class="cf_tooltiptext" i18n="tabPidTuning2" style="display:none;"></div>
</div>  
<div class="helpicon cf_tip">
<div class="cf_tooltiptext" i18n="tabPidTuning3" style="display:none;"></div>
</div>  

The i18n="" places text out of my language file inside the cf_tooltiptext div.

I modified the jBox.js file this way:

// Default options for tooltips
            'Tooltip': {
                // getContent: 'title', //
                content: $('.cf_tooltiptext'),
                trigger: 'mouseenter',
                position: {x: 'center', y: 'top'},
                outside: 'y',
                pointer: true,
                adjustPosition: true,
                reposition: true
            },

and placed this script in my html file:

// loading tooltip
$(document).ready(function() {
$('.cf_tip').jBox('Tooltip', {
    delayOpen: 100,
    delayClose: 100,
    position: {
        x: 'right',
        y: 'center'
    },
    outside: 'x'

});
});

now I'm getting all the output from all i18n="" in each tooltip instead of just the right one. What should I change?

[tajenli]

try this:

jQuery(document).ready(function($) {
  // use data-jb-title & data-jb-content attr.
  $('.cf_tooltiptext').jBox('Tooltip', {
    // getTitle: 'data-jb-title',
    getContent: 'i18n',
    delayOpen: 100,
    delayClose: 100,
    position: {
      x: 'right',
      y: 'center'
    },
    outside: 'x',
    closeOnEsc: true,
  });
});

[skaman82]

still no luck :(

[tajenli]

Just create a new html file and copy & paste the following codes. You can see it works.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link href="http://code.jboxcdn.com/0.3.2/jBox.css" rel="stylesheet">
  <script src="http://code.jboxcdn.com/0.3.2/jBox.min.js"></script>
</head>
<body>
    <div class="helpicon cf_tip">
    <div class="cf_tooltiptext" i18n="tabPidTuning">div 1</div>
    </div>  
    <div class="helpicon cf_tip">
    <div class="cf_tooltiptext" i18n="tabPidTuning2">div 2</div>
    </div>  
    <div class="helpicon cf_tip">
    <div class="cf_tooltiptext" i18n="tabPidTuning3">div 3</div>
    </div>
<script id="jsbin-javascript">
jQuery(document).ready(function($) {
  // use data-jb-title & data-jb-content attr.
  $('.cf_tooltiptext').jBox('Tooltip', {
    // getTitle: 'data-jb-title',
    getContent: 'i18n',
    delayOpen: 100,
    delayClose: 100,
    position: {
      x: 'right',
      y: 'center'
    },
    closeOnEsc: true,
  });
});
</script>
</body>
</html>

1. Do not modiy jbox.js or jbox.css. That's very bad practice.
2. In most cases, the contetn for tooltip are binded to element itself. Do not hide the element, it doesn't make any sense.
3. I suggest you to learn some basic jQuery, especially the "selector" part.

[skaman82]

Thanks, but this only shows me now exactly the value in my i18n="" in the tooltip but not the flushed text out the json file. The text gets flushed now in the helpicon div instead of the tooltip.

[skaman82]

figured it out! This is how it works for me:

jQuery(document).ready(function($) {
   $('cf_tip').each(function() { // Grab all ".cf_tip" elements, and for each...
    log(this); // ...print out "this", which now refers to each ".cf_tip" DOM element 
   });

   $('.cf_tip').each(function() { 
    $(this).jBox('Tooltip', {
        content: $(this).children('.cf_tooltiptext'),       
        delayOpen: 100,
        delayClose: 100,
        position: {
        x: 'right',
        y: 'center'
        },
        outside: 'x'
        });
      });
    });
´´´

[tajenli]

Not sure why you store tip content from json into a hidden children element?
But it's working for you, then that's good!