Блог

Я пытаюсь настроить всплывающие подсказки на своей странице. В списке есть 7 ссылок, у всех из которых есть всплывающие подсказки. 6 из них используют только базовую настройку, но один из них должен использовать увеличенное фоновое изображение и иметь пользовательский HTML. Когда я пытаюсь настроить это, работают 6 основных всплывающих подсказок, но для 1 большей HTML-подсказки ничего не происходит.

Вот мой код:

     <tr><td>
    <a class="text_link" title="Tooltip text">Dental Insurance Providers</a>
</td></tr>
<tr><td>
    <a class="text_link" id="health_insurance_tooltip" >Health Insurance Providers</a>
    <div class="tooltip">           
        <a href="#">This is my html tooltip</a>
    </div>
</td></tr>

<script type="text/javascript">
    // initialize tooltip
    $("[title]").tooltip({ 
        position: "top left", 
        effect: 'slide',
        opacity: 1,
        offset: [15, 190],
        tipClass: 'small_tooltip'
        });

     $("#health_insurance_tooltip").tooltip({ 
        position: "top left", 
        effect: 'slide',
        opacity: 1,
        offset: [15, 190]
        });
</script>

<style type="text/css">
/* tooltip styling  */
.small_tooltip {
    display:none;
    background:url(/fcapps/images/tooltip/white_arrow.jpg);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#255E0D;  
    opacity:1 !important;
    }

.tooltip {
    display:none;
    background:url(/fcapps/images/tooltip/white_arrow_big.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#255E0D;  
    opacity:1;
}
</style>
  

Буду признателен за любую помощь.

Попробуйте встроить HTML в тег title, а не использовать его как отдельный div. Это немного неудобно, поскольку вам нужно избегать любых кавычек, которые появляются в вашем HTML, но у меня это сработало. Итак, замените:

 <a class="text_link" id="health_insurance_tooltip" >Health Insurance Providers</a>
<div class="tooltip">           
    <a href="#">This is my html tooltip</a>
</div>
  

С помощью:

 <a class="text_link" id="health_insurance_tooltip"
    title="This is my <i>html</i> tooltip">Health Insurance Providers</a>