I have a Jquery UI Tooltip which has multiple rows of data. Each row has 2 separate pieces of information that I want to align separately to format nicely. The name on the left side I want to align left, while the data associated with the name I want to align to the right.
I have tried all sorts of ways to align, with no success.
I read that I can use the ui-tooltip-content css class https://api.jqueryui.com/tooltip/#option-classes
to manipulate the content, which works successfully if I am manipulating the entire content itself; however I am trying to manipulate a span tag within the content.
By doing
.ui-tooltip-content .right
{
color:blue;
}
I am successfully able to change only that text blue; however if I try
text-align: end;
text-align-last: end;
align-content: flex-end;
align-items: flex-end;
align-self: flex-end;
(I tried "right,""flex-end, and "end").
none of them seem to work
I am curious if anyone has any idea on how I may be able to align my text properly so that I wont have an issue? In reality I can just leave the default text-align: left; for the main content, but I just need to find out how to right align the right portion of the text.
Thank you for any help
Try adding below CSS:
.ui-tooltip-content .right {
float:right;
color:blue;
text-align:right
}