I have the following **jQuery**, **CSS** and **HTML** lines:

```js
$("#button").click(function(){
  $("#main").data("ot", "test");
});
```

```css
#main {
  display: inline-block;
  background-color: red;
  padding: 4px;
  width: 230px;
  text-align: center;
}
#button {
  display: inline-block;
  padding: 4px;
  background-color: green;
  cursor: pointer;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" data-ot="tooltip content" data-ot-delay="0">Div Content (Tooltip Trigger)</div>
<div id="button">Change data-ot to test</div>
```

> 
> OBS: The HTML attribute `data-ot` is where the tooltip gets the content from...
> 
> 
> 

What I've been trying to do is change the attribute `data-ot` from it's initial to "**test**", as shown in the **jQuery** lines at the snippet.

I even tried using `$('#main').attr('data-ot', 'test');` and when I inspect the element in the page it seems to have changed, but the tooltip doesn't recognize the change. During my searches I read that `data()` and `attr()` shouldn't be used together for the same porpoise because there might be some conflicts, so I guess that explains why...

I'm really lost on this, any ideas?