JavaScript to Change Tooltip to Uppercase

Question

Is there a method in JavaScript to change a tooltip/title attribute to all uppercase? I know that tooltips can't be controlled through CSS, but I don't know anything about JavaScript.

I need to only change it on specific elements if possible.

Thank you for any information.

score 0 · Answer 1 · answered Jun 15 '16 at 20:20

0

if you are using bootstrap, just apply "text-uppercase" to the tooltip element. It will automatically convert it to uppercase.

answered Jun 15 '16 at 20:20

Vatsal

2,068
4
21
24

score 0 · Answer 2 · answered Jun 15 '16 at 20:23

0

You can use Javascript's .toUpperCase() in the following way using jQuery:

$('#SomeSelectorOfToolTip').attr('title', $('#SomeSelectorOfToolTip').text().toUpperCase())

answered Jun 15 '16 at 20:23

Bubble Hacker

6,425
1
17
24

Unfortunately none of these solutions have worked. I am not using Bootstrap. The site I am editing is a hosted forum and I do not have direct control over the tooltips; I can only modify them using outside methods. – Erin Leigh Jun 16 '16 at 20:45

score 0 · Answer 3 · edited May 23 '17 at 11:52

Assuming you are talking about the default tooltip which appears upon mousing over an element with a title, you will have to do this by manipulating the title itself. You can access the title property through the DOM with:

var newTitle = document.getElementById("myElement")[0].title.toUpperCase
document.getElementById("myElement")[0].title = newTitle

Now this is, of course, inherently more difficult than simply changing the title itself, but if these are the criteria for what you are trying to accomplish it should work.

UPDATE

It appears there may be a pure CSS solution actually. Take a look at the top answer to this question: Styling native tooltip from title="Tooltip text"

JavaScript to Change Tooltip to Uppercase

3 Answers3