I18next: Is there a way to translate custom attributes?

[salvador-dali]

This is not really an issue with a library, it is just my inability to find a way to solve my problem.

I am trying to translate some custom attributes like <input placeholder="Hello" value="name"> but can not find a way to do it. I outlined the problem here http://stackoverflow.com/q/22728797/1090562 and also created a fiddle here http://jsfiddle.net/SalvadorDali/dLc7x/

[jamuhl]

you could set any attribute like for your input the placeholder:

<input data-i18n="[placeholder]placeholder_1">

if you want set multiple attributes separate them by ;.

--> http://i18next.com/pages/doc_jquery.html

setLng does under the hood nothing more than calling init with provided lng.

[salvador-dali]

Cool, thank you.

[jonalxh]

Hi @jamuhl.
I'm unable to make it work in bootstrap 4 tooltips, I'm setting data-i18n="[title]mystring" as an attribute of my HTML element, It gets translated, but the tooltip does not appear as it should, showing the title as if element has not tooltip applied.

Do you know if there is a bug with this kind of functionalities like bootstrap tooltips?

EDIT
After a research I've found this bootstrap issue where people report title dynamic change problems, If someone has the same conflict I've solved it by doing the following from Javascript:

$("#myDiv").tooltip({title: i18next.t("key"), placement: "left", trigger: "hover"});

[jamuhl]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project -> there are many ways to help this project :pray:

[InsomniumBR]

@jamuhl first, thanks for the great work.

I am trying to apply replacing on custom elements, and I want to replace two attributes as you mentioned:

<div id="divChkEnable" data-on="enabled products" data-off="disabled products" data-i18n="[data-on]bpe.products.filter-enable-enabled-products;[data-off]bpe.products.filter-enable-disabled-products">

But I could not make it work. When I do that just for one attribute, it works perfectly. But when I use both attributes, I got something like that as a result:

<div id="divChkEnable" data-on="bpe.products.filter-enable-enabled-products;[data-off]bpe.products.filter-enable-disabled-products" data-off="disabled products" data-i18n="[data-on]bpe.products.filter-enable-enabled-products;[data-off]bpe.products.filter-enable-disabled-products">

I found an old documentation page that gave me a sample on how to use it, but I could not understand what is supposed to happen on this sample:

<a id="btn1" href="#" data-i18n="[title]key.for.title;key.for.text"></a>

(Source: http://web.archive.org/web/20151128153933/http://i18next.com/pages/doc_jquery.html)

Any help would be appreciated.

Best,

[jamuhl]

@InsomniumBR is about jquery-18next? not see why that should not work: https://github.com/i18next/jquery-i18next/blob/master/src/index.js#L76 will split by ; and handle those two attributes: https://github.com/i18next/jquery-i18next/blob/master/src/index.js#L46

Eventual your key is not available / missing - try setting debug: true on init and check for any missings info in the console log

[InsomniumBR]

@jamuhl I'm so sorry, I was searching for one library solution and bumped on this thread thinking it was the same. =]
This project is actually using this: https://github.com/wikimedia/jquery.i18n

Thanks for your quickly reply.