Change data-content in a bootstrap popover

Question

I'm really new to coding, I've searched a bit to try to find an answer and I feel like there's a very simple way to do this, but the answers I find I can't understand.

I have this example which shows the popover.

<span data-toggle="popover" title="Test" data-content="Test"
id="test">popover</span>

I want to change the content of data-content in my JavaScript file

I tried this but it doesn't seem to work.

document.getElementById('test').setAtribute('data-content','hello');

Answer 1

As you are using jquery, try setting the value for content as shown below,

 $('#test').data('content', 'hello'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span data-toggle="popover" title="Test" data-content="Test" id="test">popover</span> 

Answer 2

Javascript can be a dangerous tool... it can and will silently do nothing if what you write is not valid Javascript.

So this line: document.getElementById('test').setAtribute('data-content','hello');

has a misspelling in 'SetAt t ribute', which tries to call a function that doesn't actually exist (since it's misspelled), and so it does nothing at all.

First step when debugging: re-read your code carefully!