(#1)   Supervisor

"> Miko 38711722805/02/2009My dream is you.https://i.imgur.com/Nh2lbrq.png   Posts : 387 Puntos : 1172 Agradecido : 28 Registrado : 05/02/2009 Mi Título : My dream is you. Background (Beta) : https://i.imgur.com/Nh2lbrq.png

BBcode Tooltip para SCEditor - 23/7/2016, 11:40 am Los tooltips son estás pequeñas etiquetas emergentes que se muestran cuando el cursor del ratón queda parado durante unos instantes encima de un componente visual de una ventana. Son muy prácticos para suministrar una información adicional relacionada a este componente. Demo: Código CSS: Código: .tooltip {cursor : help;} datatip { -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1); background: #fff; border: 1.5px solid #D5D5D5; box-shadow: 0 2px 2px rgba(0,0,0,0.1); position: absolute; padding: 12px ; border-radius: 3px; margin-top: 25px; margin-left: -20px; display: none; width : auto; color:black; } texttip { color:green;font-weight:bold;} Código JavaScript: Código: $(document).on('ready', function() {             $(".sceditor-container").append('<div class="sceditor-dropdown sceditor-tooltip" style="display:none;margin-top: 27px;"><div><label for="tooltiptext" style="text-align:left;" >Text : </label><input type="text" id="tooltiptext" style = "float:left" placeholder="Nhập text..."> <                 label                 for = "tooltipnote"                 style = "text-align:left;" > Note: </label><input type="text" id="tooltipnote" style = "float:left" placeholder=" "><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div > < /div>');                  $('<a class= "sceditor-button bbcode-tooltip"  title= "BBCode Tooltip"><div style="background-image:url(http://i12.servimg.com/u/f12/17/70/81/78/commen10.png)">BBCode Tooltip</div></a>').insertAfter('.sceditor-button-fahide').click(function() {                     var f = $(".sceditor-tooltip").css("display");                     if (f == 'none') {                         $(".sceditor-tooltip").css({                             "left": $(this).position().left,                             "top": $(this).position().top,                         }).show();                     } else {                         $(".sceditor-tooltip").hide();                     }                 }); $(".sceditor-tooltip .button").click(function() {                     var a = $(".sceditor-tooltip #tooltiptext").val();                     var b = $(".sceditor-tooltip #tooltipnote").val();                     $('#text_editor_textarea').sceditor("instance").insert('[tooltip=' + b + ']' + a + '[/tooltip]');                 }); $('.post').each(function() {                     var m = $(this).html().replace(/\[tooltip=(.*?)\](.*?)\[\/tooltip]/gi, '<span class="tooltip"><datatip>$1</datatip><texttip>*$2</texttip></span>');                     $(this).html(m);                 }); $('.post ').find('.tooltip').each(function() {                     var s = $(this);                     $(s).hover(function() {                         $(s).find('datatip').show();                     }, function() {                         $(s).find('datatip').hide();                     });                 });             }); Me gustaNo me gusta