How to align tooltip text to left?

HTML & CSS
1

Hi,

I am having a bootstrap template in which I am creating tooltips using the following code:

<a data-tooltip="" href="#" data-original-title="Lorem ipsum dolor sit amet"><i class="fa fa-info-circle"></i></a>

The tooltip text in coming as center aligned. How do I left align the text and increase the size of the tooltip text by 1 pt. ?

Thanks.

2

What css do you use to show the tooltip?

3

I just use that code. Nothing else.

4

Then the tooltip doesn’t show. It can’t by it self.

5

It shows fine. Just need to change the alignment from center to left and increase font size by 1 pt.

6

Please check here. This is the template I am using:

http://preview.oklerthemes.com/porto/3.8.0/shortcodes-tooltips-popovers.html

Thanks.

7

You only gave us the HTML code. You did not give us any CSS. There is 100% NO chance of that code working by itself. That’s pure HTML- no CSS is there. That will only produce an HTML link, with no styling.

You need to give us an actual example of how you use this. Not jus what you based your demo off of. We need your actual implementation. Right now, no tooltip is showing for us. We are in the dark here.

Does the tooltip show via Javascript? I see there is a data tooltip attribute, which makes me think Javascript is used.

Either way, please get us a demo. We can’t debug in the dark (or rather, it’s a lot harder than it needs t be.)

8

Hi,

Please check here as to how the tooltips are coming.

http://preview.oklerthemes.com/porto/3.8.0/shortcodes-tooltips-popovers.html

Thanks.

9

.tooltip-inner. Look at that CSS rule.

10

Hi Erik, I believe the OP is using bootstrap which controls all that. You just set the data attribute and off it goes :slight_smile: (Doesn’t make it easy to debug though without a demo).

11

Even with a demo…it was near impossible to look at the tooltip styles in the inspect element. I had to have my mouse clicked on the button, so that screen was active, and then hover over the button to activate the tooltip (it’s done in JS) and then I had to use pure keyboard navigation to move around the console. A huge PITA…

12

It’s easier to look at the documentation as they list the html.

For bootstrap3.

Then you need to look at it in context of the page in question as there may be rules cascading.

13

Yeah, but that’s the thing. The OP won’t give us their page. They gave the demo they based their code off of.

So we are still just guessing here ; - ).

14

yep :smile:

15

I’m not going to debug a demo site. And I don’t think javascript is appropriate for this.

Instead I can give you a custom tooltip example that is not javascript dependent: JsFiddle.com

Play with it and ask again if want help with it.

16

Updated the fiddle above to wrap instead of overflowing paragraph edges.

Edit: That more than the javascript demo manage in some cases, mostly left edge but also some right overflow.

17

Hi,

Okay, thanks, it seems to be working great.

Thanks.

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.