Execute emojionearea box on top of my own icon, not from default smile icon

[DannCarlo]

I have an emoji icon from font awesome that I want to use as when I click it, the emojionearea plugin will bring the emoji box on top of it then I can use it to add emojis on my textarea, just like facebook messenger. How can I do that?

[bryan-farris]

I've been working on this for a bit now, hope it can help. Still a work in progress on my end but it's working so far:

// Init emojionearea
var emojiPicker = $('div.emojiinstance').emojioneArea({
   standalone: true,
   autocomplete: false,
});
// Assign var for the emojionearea instance
var emojionearea = emojiPicker[0].emojioneArea;
// Assign var for your btn
var emojiBtn = $('.your-trigger-el');
// Set up a click event to open the picker
emojiBtn.on('click', function(e) {
    e.preventDefault();
    emojioneArea.showPicker();
});

Edited to add comments and this note: you'll have to hide the default picker/icon with CSS.

[DannCarlo]

I've been working on this for a bit now, hope it can help. Still a work in progress on my end but it's working so far:

// Init emojionearea
var emojiPicker = $('div.emojiinstance').emojioneArea({
   standalone: true,
   autocomplete: false,
});
// Assign var for the emojionearea instance
var emojionearea = emojiPicker[0].emojioneArea;
// Assign var for your btn
var emojiBtn = $('.your-trigger-el');
// Set up a click event to open the picker
emojiBtn.on('click', function(e) {
    e.preventDefault();
    emojioneArea.showPicker();
});

Edited to add comments and this note: you'll have to hide the default picker/icon with CSS.

Thank you so much sir! Will try later 😁

[DannCarlo]

How can I place the chosen input to my textarea when I select an emoji from the picker?

[DannCarlo]

And I want to it to show without the emojionecontainer, only the box containing emoji because this is what happens from your code sir

[DannCarlo]

What I want to happen is when I click the icon, the blue smile face, the area where I can pick emoji will pop in top of it, hoping you can help me sir thanks!

[bryan-farris]

From my own usage and searching the open and closed issues here on the repo, it looks like CSS is the best way to go here. By that I mean, you'd hide the default emojionearea and button with CSS and then position the picker window when it opens with CSS. Hope this helps!

[DannCarlo]

Hello sir, I will try thank you!!