Укажите jQuery UI Tooltip CSS-стили

Я использую jquery ui 1.9 на веб-сайте ajax.Укажите jQuery UI Tooltip CSS-стили

У меня есть следующий код:

This is a <span title="Some warning" class="warning">warning</span> message<br /> 
This is a <span title="Some info" class="info">info</span> message

Использование JQuery щ подсказке будет работать, даже для динамического контента:

$(function() { 
    $(document).tooltip(); 
});

Но я хочу, различные стили подсказок для каждого из этих сообщений-типов. Например, красный цвет для предупреждения и синий для информации, и он также должен работать для динамического содержимого.

Любые идеи?

источник

2013-01-21 bernhardh

вы можете быть заинтересованы в Ajax виджет см http://stackoverflow.com/questions/13175268/ajax-content-in-a-jquery-ui-tooltip-widget –

и посмотреть код на этой странице http://www.telerik.com/community/forums/aspnet-ajax/tooltip/tooltip-empty-after-postback-when-dynamically-added-in-a-custom-webcontrol.aspx –

Благодарим вас за сообщение, но это не то, что я ищу. Я не хочу загружать содержимое всплывающей подсказки с помощью ajax. Я хочу иметь подсказки в динамическом контенте и должны быть разные стили подсказок для разных clesses (например, информация, предупреждение и т. Д.). – bernhardh

Вы должны использовать toolTipClass свойство для указания класса CSS

$(document).ready(function() { 
    $(".warning").tooltip({ 
     tooltipClass: "warning-tooltip" 
    }); 
    $(".info").tooltip({ 
     tooltipClass: "info-tooltip" 
    }); 
});

источник

2013-03-23 19:10:52

Во-первых, здесь есть код, который работает:

$(function() { 
    $('#warning-binder-element').tooltip({ 
     items: '.warning', 
     tooltipClass: 'warning-tooltip', 
     content: function() { 
      return $(this).prev('.warning-toast').html(); 
     }, 
     position: { 
      my: "right bottom", 
      at: "right top-10" 
     } 
    }); 

    $('#info-binder-element').tooltip({ 
     items: '.info', 
     tooltipClass: 'info-tooltip', 
     content: function() { 
      return $(this).closest('.doo-hicky').next('.info-toast').html(); 
     }, 
     position: { 
      my: "left bottom", 
      at: "left+10 top-10" 
     } 
    }); 
});

Несколько замечаний по выше:

Селектор для .tooltip() - это не тот элемент, который вы хотите включить всплывающую подсказку, это элемент на странице что объект всплывающей подсказки и связанные с ней события привязаны.
Если вы попытаетесь привязать две всплывающие подсказки к одному и тому же объекту, останется только последний, поэтому привязка как к $(document) не будет работать (поэтому я привязал два разных объекта всплывающей подсказки к двум различным элементам на странице).
вы можете привязать объект всплывающей подсказки к элементу, который получит всплывающую подсказку, но если вы используете селектор классов, это может привести к неблагоприятным последствиям.

источник

2013-09-24 19:54:00

ответ

Смежные вопросы