如何将巨大的 html 和引导代码（卡）放入工具提示中？

Question

I'm trying to make a system, where active users is shown in page, and when you hover on his name, you can see tooltip with bootstrap's card in it. But when I put card code inside tooltip it messes up.

Code:

function displayUsersMainPage() {
    $output = '';
    $count = 0;
    $result = getUsersMainPage();
    while($row = mysqli_fetch_assoc($result)) {
        $output .= '<b data-toggle="tooltip" data-placement="top" title="<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the cards content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>">
  '.$row["username"].'
</b>';

        $count = $count + 1;
    }
    return $output; 
}

Answer 1

You need to replace all your nested quotes with HTML entities ( " ) before it will work. Once you've done that it will be valid. However, you should note that the browser's tooltip will not render the HTML but instead will display the markup as text. If you want a tooltip with custom formatting you'll need to either roll your own or use a preroll (framework) of some kind. Either way, I recommend using a <div> instead of the <b> tag, placing your content inside it instead of in an attribute, and adjusting the display and positioning with CSS.