2015-01-30 2 views
1

Предположим, что этот сценарий содержит текст. И, выделяя слово из него, я хочу, чтобы popover отображался с подсказкой, расположенной на выделенном слове.Как разместить посылку над выделенной частью текста?

Вроде как макинтош показывает определения слов, как показано ниже - highlight example

Это angularjs приложение, и я использую angularui. Таким образом, угловое решение с ориентацией было бы предпочтительным, но не необходимым.

Заранее спасибо.

+0

[ui.bootstrap.popover] (HTTP: // угловую-UI .github.io/bootstrap/#/popover) может быть полезно. – showdev

+0

@showdev Использовали это и получили popovers для работы над элементом с настраиваемыми триггерами и всем остальным. Но для того, чтобы положение всплывающей подсказки над выделенным текстовым разделом казалось невозможным (я хотел бы верить, что это возможно, но не тривиально). – sanz

+0

Я вижу. Не могли бы вы добавить код своей попытки на свой вопрос, чтобы мы могли воспроизвести проблему? Это может помочь нам визуализировать вашу проблему и найти решение. – showdev

ответ

7

Вы можете использовать следующий код, чтобы получить делать то, что вы хотите делать ... Удачи:

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 

 
    <script> 
 
    function getSelectedText() { 
 
     var text = ""; 
 
     if (typeof window.getSelection != "undefined") { 
 
     text = window.getSelection().toString(); 
 
     } else if (typeof document.selection != "undefined" && document.selection.type == "Text") { 
 
     text = document.selection.createRange().text; 
 
     } 
 
     return text; 
 
    } 
 

 
    function doSomethingWithSelectedText() { 
 
     var selectedText = getSelectedText(); 
 
     if (selectedText) { 
 

 
     $('#infoDiv').css('display', 'block'); 
 
     $('#infoDiv').css('position', 'absolute'); 
 
     $('#infoDiv').css('left', event.clientX + 10); 
 
     $('#infoDiv').css('top', event.clientY + 15); 
 
     } else { 
 
     $('#infoDiv').css('display', 'none'); 
 
     }; 
 
    }; 
 

 
    document.onmouseup = doSomethingWithSelectedText; 
 
    document.onkeyup = doSomethingWithSelectedText; 
 
    </script> 
 
    <style> 
 
    /*Tooltip div styling */ 
 
    .tooltipDiv { 
 
     display: none; 
 
     width: 250px; 
 
     z-index: 101; 
 
     background-color: #fff; 
 
     border: 3px solid #666; 
 
     padding: 12px 12px 12px 12px; 
 
     border-radius: 0px 25px 0px 25px; 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <div id="infoDiv" class="tooltipDiv">This is where your will put whatever you like...</div> 
 

 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
</body> 
 

 
</html>

+0

@sanz сделал эту работу как ожидалось? – spooky

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