JS cannot modify the HTML in a tooltip.

c1rdan commented 9 years ago

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 commented 9 years ago

Do you have an example I could look at?

c1rdan commented 9 years ago

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 commented 9 years ago

No clue? :(

joshuagatcke commented 9 years ago

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

joshuagatcke / HTML-KickStart

JS cannot modify the HTML in a tooltip. #63