I have solved my problem!
See attached image file for the structure.
I have installed the "Hannah Code Text Formatter" and created my own code for the tooltip!
<?php
$tooltipMessage = isset($tooltipMessage) ? htmlentities($tooltipMessage) : "";
$tooltipAnchorname = isset($tooltipAnchorname) ? htmlentities($tooltipAnchorname) : "";
$output = '<a class="bootstrap-tooltip" title="" data-toggle="tooltip" type="button" data-original-title="'.$tooltipMessage.'">'.$tooltipAnchorname.'</a>';
echo $output;
?>
The usage of the code:
[[bootstrapTooltip tooltipMessage="The TooltipMessage....." tooltipAnchorname="My ToolTip-Link"]]
My template file contains following code (see attached image file, the marked area shows the important part of the code)
<?php
foreach($page->colorPaletteBoxRepeater as $actualColorPaletteBoxRepeater) {
$getActualColorPaletteBoxesListArray = array_values(array_filter(explode(PHP_EOL, $actualColorPaletteBoxRepeater->colorPaletteBoxesList)));
$getActualColorPaletteBoxesListHTML = "";
foreach($getActualColorPaletteBoxesListArray as $getActualColorPaletteBoxesList) $getActualColorPaletteBoxesListHTML .= '<li class="list-group-item">'.$getActualColorPaletteBoxesList.'</li>';
echo '<article class="'.$actualColorPaletteBoxRepeater->colorPaletteBoxesBackgroundSelector->title.'">';
echo '<div class="container">
<div class="jumbotron">
<div class="row clearfix">
<div class="col-lg-6 column">
<i class="fa fa-'.$actualColorPaletteBoxRepeater->fontIconPicker.' services-font-icon"></i>
</div>
<div class="col-lg-6 column">
<h1>'.$actualColorPaletteBoxRepeater->colorPaletteBoxesHeadline.'</h1>
<p>'.$actualColorPaletteBoxRepeater->colorPaletteBoxesParagraph.'</p>
<ul class="list-group">
'.$getActualColorPaletteBoxesListHTML.'
</ul>
<p>
<a class="btn btn-primary btn-lg" href="'.$actualColorPaletteBoxRepeater->colorPaletteBoxesLink.'" role="button">'.$actualColorPaletteBoxRepeater->colorPaletteBoxesLinkName.'</a>
</p>
</div>
</div>
</div>
</div>';
echo '</article>';
}
?>