JS cannot modify the HTML in a tooltip. #63

c1rdan · 2014-08-25T18:40:41Z

I'm trying to modify dinamically the HTML which is shown in a tooltip but apparently this is not possible. Just removing the class "tooltip-content" from the div makes the JS works properly (but, of course, lose the tooltip effect).

For modifing the HTML I have tried with the functions html() and append() of JQuery.

joshuagatcke · 2014-08-25T18:45:10Z

Do you have an example I could look at?

c1rdan · 2014-08-28T15:38:37Z

Sorry for the delay, here is a minimal example. Notice I have not used the "tooltip-content" class on the div, and you can watch how clicking the button update the div, but the tooltip keeps the old text (The same happens if you use the class, just the div is not shown).

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
    <link rel="stylesheet" type="text/css" href="css/kickstart.css" media="all" />
    <link rel="stylesheet" type="text/css" href="style.css" media="all" /> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/kickstart.js"></script>
</head>
<body>
<div class="grid">
    <script>
    function updateTooltip(){
        $("#tooltipcontentID").append(". more content");
    }
    </script>
    <div class="col_12" style="margin-top:100px;">
        <div id="tooltipcontentID" class="">a lot of content </div>
        <h1 class="center">
        <button class="tooltip medium blue pill" data-content="#tooltipcontentID" data-action="click" onclick="updateTooltip()">Click Me</button>
        </h1>
    </div>
</div>
</body>
</html>

c1rdan · 2014-09-01T13:22:28Z

No clue? :(

joshuagatcke · 2014-09-01T13:28:13Z

wrap your js in $(document).ready(function(){}); statement.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JS cannot modify the HTML in a tooltip. #63

JS cannot modify the HTML in a tooltip. #63

c1rdan commented Aug 25, 2014

joshuagatcke commented Aug 25, 2014

c1rdan commented Aug 28, 2014

c1rdan commented Sep 1, 2014

joshuagatcke commented Sep 1, 2014

JS cannot modify the HTML in a tooltip. #63

JS cannot modify the HTML in a tooltip. #63

Comments

c1rdan commented Aug 25, 2014

joshuagatcke commented Aug 25, 2014

c1rdan commented Aug 28, 2014

c1rdan commented Sep 1, 2014

joshuagatcke commented Sep 1, 2014