I need help with tooltip or hovertext

How do I so that the information about the bars does not come out crooked? please i need help with this.

i make an example of vikas in this post, aclaration.
xValue = [‘giraffes’, ‘orangutans’, ‘monkeys’],
yValue1 = [20, 14, 23];
yValue2 = [24, 16, 20];
zValue1 = [“11.4%”, “7.9%”, “13.1%”];
zValue2 = [“14.4%”, “9.6%”, “12%”];
var trace1 = {
y: xValue,
x: yValue1,
z: zValue1,
orientation: ‘h’,
text: yValue1.map(String),
hoverinfo: ‘z+text’,
textposition: ‘auto’,
type: ‘bar’
};
var trace2 = {
y: xValue,
x: yValue2,
z: zValue2,
orientation: ‘h’,
text: yValue2.map(String),
hoverinfo: ‘z+text’,
textposition: ‘auto’,
type: ‘bar’,
};
var data = [trace1, trace2];
var layout = {
title: ‘Colored Bar Chart’,
barmode: ‘stack’
};
Plotly.newPlot(‘myDiv’, data, layout, {showSendToCloud:true});

Result:
image

Maybe in the layout try adding:

hoverlabel: { align: "right" },