Tooltip positioning problem

[Steve Eisert]

I have a large tooltip defined for a line chart.  When hovering over datapoints near the left-most part of the chart, the tooltip displays as desired, to the right of the mouse position.   When hovering over datapoints near the right-most part of the chart, the tooltip displays over the top of the mouse position.  Is there a setting that would correct the positioning for the latter case?

Current code listed below:

var chart = c3.generate({
bindto: '#chart',
data: {
xs: {
'Predictions': 'x1',
'Baseline': 'x2'
},
columns: [
xPredictions,
xBaseline,
yPredictions,
yBaseline
]
},
/*****/

axis: {
 
y: {
    label:{
text: 'Estimated Vent Hours Remaining',
position: 'outer-middle'
}
},
x: {
    label:{
text: 'Elapsed Vent Hour',
position: 'outer-center'
},
tick: {
      fit: false
    }
}

},
grid: {
x: {
show: true
},
y: {
show: true
}
},
tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
var ttHTML = [];


ttHTML.push("<style>");
ttHTML.push(".factor-desc {");
ttHTML.push("font-size: 90%;");
ttHTML.push("margin: auto;");
ttHTML.push("border: 1px solid #73AD21;");
ttHTML.push("border-collapse: collapse;");
ttHTML.push("}");
ttHTML.push("</style>");

//ttHTML.push("<div style='width: 100%;font-size: 75%;padding:.1em;border: 1px solid;border-color: rgb(203, 202, 195);  background: rgba(255, 252, 224, 0.8);'>");
ttHTML.push("<div style='font-size: 75%;padding:.1em;border: 1px solid;border-color: rgb(203, 202, 195);  background: rgba(255, 252, 224, 0.8);'>");
ttHTML.push("<p style='border: 1px solid white;background: rgba(28, 97, 248, 0.5)'>Hour of Ventilation : " + objData.VENTS[selIndex].PREDICTIONS[d[0].index].HOUR_OF_VISIT + "</p>");
//;padding: 25px;
ttHTML.push("<div style='padding: .5em;'>");
ttHTML.push("<p>Estimated Hours Remaining : " + objData.VENTS[selIndex].PREDICTIONS[d[0].index]. Y_PRED + " <br><br></p>");

ttHTML.push("<table class='factor-desc'>");
ttHTML.push("<tr><td class='factor-desc'>Factor 1 : </td><td class='factor-desc' style='max-width: 30em;margin: auto;'>" + objData.VENTS[selIndex].PREDICTIONS[d[0].index].FACTOR1 +"</td></tr>");
ttHTML.push("<tr><td class='factor-desc'>Factor 2 : </td><td class='factor-desc' style='max-width: 30em;margin: auto;'>" + objData.VENTS[selIndex].PREDICTIONS[d[0].index].FACTOR2 +"</td></tr>");
ttHTML.push("<tr><td class='factor-desc'>Factor 3 : </td><td class='factor-desc' style='max-width: 30em;margin: auto;'>" + objData.VENTS[selIndex].PREDICTIONS[d[0].index].FACTOR3 +"</td></tr>");
ttHTML.push("<tr><td class='factor-desc'>Factor 4 : </td><td class='factor-desc' style='max-width: 30em;margin: auto;'>" + objData.VENTS[selIndex].PREDICTIONS[d[0].index].FACTOR4 +"</td></tr>");
ttHTML.push("<tr><td class='factor-desc'>Factor 5 : </td><td class='factor-desc' style='max-width: 30em;margin: auto;'>" + objData.VENTS[selIndex].PREDICTIONS[d[0].index].FACTOR5 +"</td></tr>");
ttHTML.push("</table>");
ttHTML.push("</div>");
ttHTML.push("</div>");

[Majo]

MT103/202 DIRECT WIRE TRANSFER
PAYPAL TRANSFER
CASHAPP TRANSFER
ZELLE TRANSFER
LOAN DEAL
TRANSFER WISE
WESTERN UNION TRANSFER
BITCOIN FLASHING
BANK ACCOUNT LOADING/FLASHING
IBAN TO IBAN TRANSFER
MONEYGRAM TRANSFER
IPIP/DTC
SLBC PROVIDER
CREDIT CARD TOP UP
DUMPS/ PINS
SEPA TRANSFER
WIRE TRANSFER
BITCOIN TOP UP
GLOBALPAY INC US
SKRILL USA
UNIONPAY RECEIVER

Thanks.


NOTE; ONLY SERIOUS / RELIABLE RECEIVERS CAN CONTACT.

DM ME ON WHATSAPP
+44 7529 555638